下面是一个基于下面内容的更优雅的解决方案。 它解释了从一个以上层次的孩子中冒出来的事件。 它还考虑了跨浏览器的问题。

function onMouseOut(this, event) {
//this is the original element the event handler was assigned to
   var e = event.toElement || event.relatedTarget;

//check for all children levels (checking from bottom up)
while(e && e.parentNode && e.parentNode != window) {
    if (e.parentNode == this||  e == this) {
        if(e.preventDefault) e.preventDefault();
        return false;
    }
    e = e.parentNode;
}

//Do something u need here
}

document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);

简单地，我们可以检查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;
        }

    }

});

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

更进一步说:

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

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

有一个简单的方法可以让它起作用。元素和所有子元素都设置了相同的类名，那么:

element.onmouseover = function(event){
 if (event.target.className == "name"){
 /*code*/
 }
}

我认为Quirksmode有你需要的所有答案(不同的浏览器冒泡行为和mouseenter/mouseleave事件)，但我认为最常见的结论是，事件冒泡混乱的使用框架，如JQuery或Mootools(有mouseenter和mouseleave事件，这正是你直觉会发生的)。

看看他们是怎么做的，如果你想的话，自己做吧 或者你也可以用事件部分(及其依赖项)创建自定义的“精益”版本的Mootools。

下面是一个基于下面内容的更优雅的解决方案。 它解释了从一个以上层次的孩子中冒出来的事件。 它还考虑了跨浏览器的问题。

function onMouseOut(this, event) {
//this is the original element the event handler was assigned to
   var e = event.toElement || event.relatedTarget;

//check for all children levels (checking from bottom up)
while(e && e.parentNode && e.parentNode != window) {
    if (e.parentNode == this||  e == this) {
        if(e.preventDefault) e.preventDefault();
        return false;
    }
    e = e.parentNode;
}

//Do something u need here
}

document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);