我onmouseout在绝对位置div中的函数遇到麻烦。当鼠标点击div中的一个子元素时,将触发mouseout事件,但是我不希望它触发,直到鼠标不在父绝对div之外。
onmouseout
我如何防止mouseout事件在没有jquery的情况下击中子元素而触发。
mouseout
我知道这与事件冒泡有关,但是我没有运气去寻找解决方法。
但是,该解决方案使用jQuery。
function onMouseOut(event) { //this is the original element the event handler was assigned to var e = event.toElement || event.relatedTarget; if (e.parentNode == this || e == this) { return; } alert('MouseOut'); // handle mouse event here! } document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);
我制作了一个快速的JsFiddle演示,其中包含所有需要的CSS和HTML,请查看…
注意 ,这仅检查直接父级,如果父级div嵌套了子级,则您必须以某种方式遍历父级元素以寻找“原始元素”
*嵌套孩子的 *编辑 示例
编辑 固定为希望跨浏览器
function makeMouseOutFn(elem){ var list = traverseChildren(elem); return function onMouseOut(event) { var e = event.toElement || event.relatedTarget; if (!!~list.indexOf(e)) { return; } alert('MouseOut'); // handle mouse event here! }; } //using closure to cache all child elements var parent = document.getElementById("parent"); parent.addEventListener('mouseout',makeMouseOutFn(parent),true); //quick and dirty DFS children traversal, function traverseChildren(elem){ var children = []; var q = []; q.push(elem); while (q.length > 0) { var elem = q.pop(); children.push(elem); pushAll(elem.children); } function pushAll(elemArray){ for(var i=0; i < elemArray.length; i++) { q.push(elemArray[i]); } } return children; }