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

我在绝对定位的div中的onmouseout函数遇到了麻烦。当鼠标击中div中的子元素时，mouseout事件发生，但我不希望它发生，直到鼠标离开父元素，绝对div。

我如何防止mouseout事件从发射时，它击中一个子元素没有jquery。

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

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

但是，该解决方案使用jQuery。

当前回答

我找到了一个很简单的解决办法，

只需使用onmouseleave="myfunc()"事件，而不是onmousout="myfunc()"事件

在我的代码中，它工作了!!

例子:

<html>
<head>
<script type="text/javascript">
   function myFunc(){
      document.getElementById('hide_div').style.display = 'none';
   }
   function ShowFunc(){
      document.getElementById('hide_div').style.display = 'block';
   }
</script>
</head>
<body>
<div onmouseleave="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
   Hover mouse here
   <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
      CHILD <br/> It doesn't fires if you hover mouse over this child_div
   </div>
</div>
<div id="hide_div" >TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>

mouseout函数的示例:

<html>
<head>
<script type="text/javascript">
   function myFunc(){
      document.getElementById('hide_div').style.display = 'none';
   }
   function ShowFunc(){
      document.getElementById('hide_div').style.display = 'block';
   }
</script>
</head>
<body>
<div onmouseout="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
   Hover mouse here
   <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
      CHILD <br/> It fires if you hover mouse over this child_div
   </div>
</div>
<div id="hide_div">TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>

希望能有所帮助。

2012-12-26 13:03:59

其他回答

对于在大多数情况下都有效的更简单的纯CSS解决方案，可以通过将子指针事件设置为none来删除它们

.parent * {
     pointer-events: none;
}

浏览器支持IE11+

2013-09-16 20:45:40

简单地，我们可以检查e.relatedTarget是否有子类，如果为真则返回函数。

    if ($(e.relatedTarget).hasClass("ctrl-btn")){
        return;
    }

这是为我工作的代码，我用于html5视频播放，暂停按钮切换悬停视频元素

element.on("mouseover mouseout", function(e) {

    if(e.type === "mouseout"){

        if ($(e.relatedTarget).hasClass("child-class")){
            return;
        }

    }

});

2020-09-17 06:11:45

虽然你提到的解决方案使用jquery， Mouseenter和mouseleave是原生dom事件，所以你可以不使用jquery。

2018-01-26 22:29:25

有两种方法可以处理这个问题。

1)检查事件。目标结果在你的回调，看看它是否匹配你的父div

var g_ParentDiv;

function OnMouseOut(event) {
    if (event.target != g_ParentDiv) {
        return;
    }
    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.onmouseout = OnMouseOut;
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

2)或者使用事件捕获和调用事件。回调函数中的stopPropagation

var g_ParentDiv;

function OnMouseOut(event) {

    event.stopPropagation(); // don't let the event recurse into children

    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.addEventListener("mouseout", OnMouseOut, true); // pass true to enable event capturing so parent gets event callback before children
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

2011-01-15 04:10:24

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, EDIT更新链接

2011-01-15 05:47:35

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

推荐文章

最新文章

标签