来自MDN的mouseout事件的定义为：
当将指针设备（通常是鼠标）从连接了侦听器的元素上移开或从其子元素上移开时，将触发mouseout事件。
因此，如果我有一个与之mouseout相连的容器div，那么我希望如果鼠标从其子级中的任何一个移出，就会触发该事件。但是我所看到的是，即使将鼠标移入了容器的孩子中，也是如此mouseout。这是示例：
x = 0;
$(document).ready(function(){
$("div.over").mouseout(function(){
$(".over span").text(x += 1);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
<h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>当鼠标输入时，h3将触发mouseouton div.over。为什么？
编辑：请提及权威参考以备份您的主张。
由于您的div包含子项，因此您在“鼠标悬停”子项后就“拖出”了容器，这是设计使然。因为它在它自己的可见空间的外部，而在孩子的可见空间的内部。由于子级也位于父级内部，因此它“继承”了事件，因为该事件被视为单独的卷，但仍在父级空间内。这就是为什么在您“暂停”孩子时触发事件的原因。这称为“冒泡”，该事件使元素的族谱冒泡。
如Mahi所指出的，如果您使用“ mouseleave”，则仅当它离开附加元素的区域时才会触发。
MDN文档在此处解释了差异：https : //developer.mozilla.org/en-US/docs/Web/Events/mouseleave
但是权威的答案最好在W3C DOM规范中查看：
当指针设备从一个元素移动到其后代元素之一的边界时，必须分派它。
因此，它明确指出，将鼠标移到子元素之一上时必须触发事件mouseout。因此，发生这种情况的原因是根据设计和规范：
https://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout
我添加了一个样本来显示差异
x = 0;
$(document).ready(function(){
$("div.over").mouseout(function(e){
$(".over span").text(x += 1);
console.log(e.target);
});
$("div.over > h3").mouseover(function(){
$(".over > h3").css("color", "red");
}).mouseout(function(){
$(".over > h3").css("color","black");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
<h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>x = 0;
$(document).ready(function(){
$("div.over").mouseleave(function(){
$(".over span").text(x += 1);
});
$("div.over > h3").mouseover(function(){
$(".over > h3").css("color", "red");
}).mouseout(function(){
$(".over > h3").css("color","black");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
<h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>现在，如果将子元素在“ z-space”中向下移动，它将不再影响mouseout事件：
x = 0;
$(document).ready(function(){
$("div.over").mouseout(function(){
$(".over").css("background","red");
});
$("div.over").mouseover(function(){
$(".over").css("background","#444");
});
$("div.over > h3").css("display", "block");
$("div.over > h3").css("position", "relative");
$("div.over > h3").css("z-index", -1000);
$("div.over > h3").mouseover(function(){
$(".over > h3").css("color", "red");
}).mouseout(function(){
$(".over > h3").css("color","black");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
<h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句