如果你添加(或拥有)一个CSS类或id到父元素，那么你可以这样做:

<div id="parent">
  <div>
  </div>
</div>

JavaScript:
document.getElementById("parent").onmouseout = function(e) {
  e = e ? e : window.event //For IE
  if(e.target.id == "parent") {
    //Do your stuff
  }
}

所以只有当事件在父div上时，才会执行东西。

用onmouseleave代替onmouseout。

你还没有向我们展示你的具体代码，所以我不能在你的具体例子中告诉你如何做到这一点。

但是它很简单:用onmouseleave代替onmouseout。

就是这样:)所以，很简单:)

如果不知道怎么做，请参阅解释:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out

和平的蛋糕:)尽情享受吧。

我只是想和你分享一些东西。 我在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事件将不再被触发，我的浮动导航菜单将不再关闭自己，当光标在它和列表中的一个元素上时。

更进一步说:

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

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

我用这个让它像魔法一样起作用:

function HideLayer(theEvent){
 var MyDiv=document.getElementById('MyDiv');
 if(MyDiv==(!theEvent?window.event:theEvent.target)){
  MyDiv.style.display='none';
 }
}

MyDiv标签是这样的:

<div id="MyDiv" onmouseout="JavaScript: HideLayer(event);">
 <!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>

通过这种方式，当onmouseout转到子节点、孙子节点等时……的风格。Display ='none'不执行;但是当onmouseout退出MyDiv时，它会运行。

所以不需要停止传播，使用计时器等等……

谢谢例子，我可以从他们做这个代码。

希望这能帮助到一些人。

也可以这样改进:

function HideLayer(theLayer,theEvent){
 if(theLayer==(!theEvent?window.event:theEvent.target)){
  theLayer.style.display='none';
 }
}

然后DIVs标签是这样的:

<div onmouseout="JavaScript: HideLayer(this,event);">
 <!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>

所以更一般，不只是一个div，不需要添加id="…"在每一层。

我检查原始元素的偏移量以获得元素边界的页面坐标，然后确保只有当鼠标退出超出这些边界时才触发鼠标退出操作。很脏，但很管用。

$(el).live('mouseout', function(event){
    while(checkPosition(this, event)){
        console.log("mouseovering including children")
    }
    console.log("moused out of the whole")
})

var checkPosition = function(el, event){
    var position = $(el).offset()
    var height = $(el).height()
    var width = $(el).width()
    if (event.pageY > position.top 
|| event.pageY < (position.top + height) 
|| event.pageX > position.left 
|| event.pageX < (position.left + width)){
    return true
}
}

如果出于某种原因你不想使用mouseenter和mouseleave事件，你可以使用mouseover/mouseout和一些“deboundation”。

这个想法依赖于这样一个事实，即当您的事件处理程序在跨越各个子元素....之间的边界时将接收out，然后接收一个新的over除非鼠标真的离开(超过反弹周期)。这似乎比在每个事件上爬行dom节点更简单。

如果你在假设你有一个真正的out之前有一个短暂的延迟“debounce”，你可以有效地忽略所有这些从子元素冒出来的out/over事件。

注意!如果子元素也有over和/或out事件的监听器，并且它们的处理程序调用event. stoppropagation()来阻止事件向附加处理程序的父元素冒泡，这将不起作用。如果您控制代码，这并不一定是问题，但您应该注意到这一点。

示例代码

javascript

function mouseOverOutDebounce (element, debounceMs, mouseOverFn, mouseOutFn) {
    var over = false,
        debounceTimers = [];

    function mouseOver (evt) {
        if (over) {  // already OVER, existing interaction
            while (debounceTimers.length > 0) { // then we had a pending mouseout(s), cancel
                window.clearTimeout(debounceTimers.shift());
            }
        }
        else { // new OVER
            over = true;
            mouseOverFn(evt);
        }
    }
    function mouseOut (evt) {
        if (!over) return;  // already OUT, ignore.

        debounceTimers.push(window.setTimeout(function () {
            over = false;
            mouseOutFn(evt);
        }, debounceMs));
    }

    function removeEventListeners () {
        element.removeEventListener('mouseover', mouseOver);
        element.removeEventListener('mouseout', mouseOut);
    }
    
    element.addEventListener('mouseover', mouseOver);
    element.addEventListener('mouseout', mouseOut);

    return removeEventListeners;
}

var someEl = document.querySelector('.container'),
    textarea = document.querySelector('textarea'),
    mouseOver = function (evt) { report('mouseOVER', evt); },
    mouseOut = function (evt) { report('mouseOUT', evt); },
    removeEventListeners = mouseOverOutDebounce(someEl, 200, mouseOver, mouseOut);

function report(msg, data) {
    console.log(msg, data);
    textarea.value = textarea.value + msg + '\n';
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }
        body {
            margin: 5%;
        }
        .container {
            width: 300px;
            height: 600px;
            border: 10px solid red;
            background-color:  #dedede;
            float: left;
        }
        .container .square {
            width: 100px;
            height: 100px;
            background-color: #2086cf;
            margin: -10px 0 0 -10px; 
        }
        textarea {
            margin-left: 50px;
            width: 800px;
            height: 400px;
            background-color: #464646;
            font-family: monospace;
            color: white;
        }
        .bar {
            width: 2px;
            height: 30px;
            display: inline-block;
            margin-left: 2px;
            background-color: pink;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="square"></div>

    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>

<textarea></textarea>


<script src="interactions.js"></script>
</body>
</html>

小提琴

https://jsfiddle.net/matp/9bhjkLct/5/