Mouseover 和 mouseenter 事件之间的区别是什么？

我一直使用 mouseover事件，但是在阅读 jQuery 文档时，我发现了 mouseenter。它们的功能似乎完全一样。

这两者之间有区别吗? 如果有的话，我应该在什么时候使用它们？
(也适用于 mouseout和 mouseleave)。

103983 次浏览
小开

像这样的问题通常是正确的，Quirksmade 有 最好的答案。

我可以想象，因为 jQuery 的目标之一是使事件与浏览器无关，所以使用任何一个事件名都会触发相同的行为。编辑: 多亏了其他帖子，我现在看到事实并非如此

小开

鼠标输入和鼠标离开 不要对事件冒泡做出反应，而鼠标离开和鼠标离开 做。

这是描述这种行为的 文章。

小开
最佳答案

您可以从 JQuery 文档页面尝试下面的示例。这是一个不错的小型互动演示，非常清晰，你可以亲眼看到。

var i = 0;
$("div.overout")
.mouseover(function() {
i += 1;
$(this).find("span").text("mouse over x " + i);
})
.mouseout(function() {
$(this).find("span").text("mouse out ");
});


var n = 0;
$("div.enterleave")
.mouseenter(function() {
n += 1;
$(this).find("span").text("mouse enter x " + n);
})
.mouseleave(function() {
$(this).find("span").text("mouse leave");
});
div.out {
width: 40%;
height: 120px;
margin: 0 15px;
background-color: #d6edfc;
float: left;
}


div.in {
width: 60%;
height: 60%;
background-color: #fc0;
margin: 10px auto;
}


p {
line-height: 1em;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="out overout">
<span>move your mouse</span>
<div class="in">
</div>
</div>


<div class="out enterleave">
<span>move your mouse</span>
<div class="in">
</div>
</div>

简而言之，您将注意到，当您在一个元素上时，该元素上的鼠标进入事件发生在该元素上——来自该元素的子元素或父元素，但是鼠标进入事件只有在鼠标从该元素外部移动到该元素时才会发生。

或者用 作为 mouseover()的文件的话说:

[ .mouseover()]可能由于事件冒泡而引起许多头痛。例如，在本例中，当鼠标指针移动到 Inside 元素上时，将向该元素发送一个 mouseover 事件，然后逐渐移动到 Out。这可能会在不恰当的时候触发绑定的鼠标悬停处理程序。有关有用的替代方案，请参见 .mouseenter()的讨论。

小开 
$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
});


提交答案