小编典典

在没有jQuery的情况下悬停父绝对div的子元素时防止onmouseout

all

onmouseout在绝对定位的 div 中遇到问题。当鼠标点击 div 中的子元素时,mouseout 事件会触发,但我不希望它在鼠标离开父级绝对
div 之前触发。

如何防止mouseout事件在没有 jquery 的情况下命中子元素时触发。

我知道这与事件冒泡有关,但我没有找到如何解决这个问题的运气。

我在这里找到了一个类似的帖子:如何禁用由子元素触发的 mouseout
事件?

然而,该解决方案使用 jQuery。


阅读 66

收藏
2022-06-30

共1个答案

小编典典

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编辑 更新的链接

2022-06-30