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

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

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

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

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

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

当前回答

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

.parent * {
     pointer-events: none;
}

浏览器支持IE11+

2013-09-16 20:45:40

其他回答

var elem = $('#some-id');
elem.mouseover(function () {
   // Some code here
}).mouseout(function (event) {
   var e = event.toElement || event.relatedTarget;
   if (elem.has(e).length > 0) return;

   // Some code here
});

2012-10-02 15:49:06

感谢阿姆贾德·马萨德，他激励了我。

我有以下解决方案，似乎在IE9, FF和Chrome和代码很短(没有复杂的闭包和横向子东西):

    DIV.onmouseout=function(e){
        // check and loop relatedTarget.parentNode
        // ignore event triggered mouse overing any child element or leaving itself
        var obj=e.relatedTarget;
        while(obj!=null){
            if(obj==this){
                return;
            }
            obj=obj.parentNode;
        }
        // now perform the actual action you want to do only when mouse is leaving the DIV
    }

2012-06-02 04:40:48

使用onmouseleave。

或者，在jQuery中使用mouseleave()

这正是你要找的东西。例子:

<div class="outer" onmouseleave="yourFunction()">
    <div class="inner">
    </div>
</div>

或者，在jQuery中:

$(".outer").mouseleave(function(){
    //your code here
});

这里有一个例子。

2015-06-07 18:37:00

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

只需使用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

我只是想和你分享一些东西。我在ng-mouseenter和ng-mouseleave事件中遇到了一些困难。

案例分析:

我创建了一个浮动导航菜单，当光标在图标上时切换。这个菜单在每一页的最上面。

为了处理菜单上的显示/隐藏，我切换了一个类。 ng-class = " {: vm.isHover} " 切换vm。isHover，我使用ng鼠标事件。 ng-mouseenter = " vm。isHover = true" ng-mouseleave = " vm。isHover = false"

目前，一切都很好，并按预期工作。解决方法简单明了。

接下来的问题是:

在一个特定的视图中，我有一个元素列表。当光标在列表元素上时，我添加了一个操作面板。我使用与上面相同的代码来处理该行为。

存在的问题:

我发现当我的光标在浮动导航菜单上，也在一个元素的顶部，有一个相互冲突。动作面板显示，浮动导航被隐藏。

问题是，即使光标在浮动导航菜单上，列表元素ng-mouseenter也会被触发。这对我来说毫无意义，因为我认为鼠标传播事件会自动中断。我必须说我很失望，我花了一些时间来找出那个问题。

第一个想法:

我试着用这些:

$ event.stopPropagation () $ event.stopImmediatePropagation ()

我结合了很多ng指针事件(mouemove, mouveover，…)，但没有一个帮助我。

CSS解决方案:

我用一个简单的css属性找到了解决方案，我越来越多地使用它:

pointer-events: none;

基本上，我这样使用它(在我的列表元素上):

ng-style="{'pointer-events': vm.isHover ? 'none' : ''}"

有了这个棘手的，ng-mouse事件将不再被触发，我的浮动导航菜单将不再关闭自己，当光标在它和列表中的一个元素上时。

更进一步说:

正如你所期望的，这个解决方案可行，但我不喜欢它。我们无法控制事态发展，这很糟糕。另外，你必须有访问虚拟机的权限。实现这个目标是有可能的，可能是不可能的，但在某种程度上是肮脏的。如果有人想看的话，我可以做一把小提琴。

然而，我没有其他的解决方案…… 说来话长，我不能给你土豆，所以请原谅我的朋友。不管怎样，指针事件:没有是生命，所以记住它。

2017-05-01 21:48:54

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

推荐文章

最新文章

标签