我onmouseout在绝对定位的 div 中遇到问题。当鼠标点击 div 中的子元素时,mouseout 事件会触发,但我不希望它在鼠标离开父级绝对 div 之前触发。
onmouseout
如何防止mouseout事件在没有 jquery 的情况下命中子元素时触发。
mouseout
我知道这与事件冒泡有关,但我没有找到如何解决这个问题的运气。
我在这里找到了一个类似的帖子:如何禁用由子元素触发的 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,请查看…
编辑 跨浏览器支持的固定链接http://jsfiddle.net/RH3tA/9/
请注意 ,这仅检查直接父级,如果父级 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; }
和一个新的 JSFiddle , 编辑 更新的链接