mouseover和mouseenter事件有什么区别？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mouseover和mouseenter事件有什么区别？相关的知识，希望对你有一定的参考价值。
我一直使用mouseover事件，但在阅读jQuery文档时，我发现了mouseenter。它们似乎完全相同。
这两者之间是否存在差异？如果是，我应该何时使用它们？
（也适用于mouseout vs mouseleave）。
答案
您可以从the jQuery doc页面尝试以下示例。这是一个很好的小型互动演示，它非常清晰，你可以亲自看看。
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>另一答案
Mouseenter和mouseleave不会对事件冒泡做出反应，而鼠标悬停和鼠标输出则会发生。
这是描述行为的article。
另一答案
对于像这样的问题通常都是如此，Quirksmode有the best answer。
我想，因为jQuery的目标之一是使浏览器不可知，所以使用任一事件名称都会触发相同的行为。 编辑：感谢其他帖子，我现在看到的情况并非如此
另一答案
$(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);})
});
以上是关于mouseover和mouseenter事件有什么区别？的主要内容，如果未能解决你的问题，请参考以下文章