我在绝对定位的div中的onmouseout函数遇到了麻烦。当鼠标击中div中的子元素时，mouseout事件发生，但我不希望它发生，直到鼠标离开父元素，绝对div。
我如何防止mouseout事件从发射时，它击中一个子元素没有jquery。
我知道这与事件冒泡有关，但我没有找到如何解决这个问题的方法。
我在这里找到了一个类似的帖子:如何禁用由子元素触发的鼠标退出事件?
但是，该解决方案使用jQuery。
当前回答
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
});
其他回答
如果你正在使用jQuery，你还可以使用“mouseleave”函数，它可以为你处理所有这些问题。
$('#thetargetdiv').mouseenter(do_something);
$('#thetargetdiv').mouseleave(do_something_else);
Do_something将在鼠标进入targetdiv或其任何子div时触发，do_something_else仅在鼠标离开targetdiv及其任何子div时触发。
我认为Quirksmode有你需要的所有答案(不同的浏览器冒泡行为和mouseenter/mouseleave事件)，但我认为最常见的结论是，事件冒泡混乱的使用框架，如JQuery或Mootools(有mouseenter和mouseleave事件，这正是你直觉会发生的)。
看看他们是怎么做的，如果你想的话，自己做吧 或者你也可以用事件部分(及其依赖项)创建自定义的“精益”版本的Mootools。
虽然你提到的解决方案使用jquery， Mouseenter和mouseleave是原生dom事件，所以你可以不使用jquery。
感谢阿姆贾德·马萨德，他激励了我。
我有以下解决方案，似乎在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
}
简单地，我们可以检查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;
}
}
});
