mouseover和mouseenter事件有什么区别？

Question

我一直使用这个mouseover事件,但在阅读我发现的jQuery文档时mouseenter.它们似乎完全相同.

这两者之间是否存在差异？如果是,我应该何时使用它们？
(也适用于mouseoutvs mouseleave).

Answer 1

您可以从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>

简而言之,您会注意到当一个元素在它上面时会发生一个鼠标悬停事件 - 来自它的子OR或父元素,但只有当鼠标从该元素外部移动到该元素时才会发生鼠标输入事件.

或者正如mouseover()文档所说:

.mouseover()由于事件冒泡,[ ]会引起很多麻烦.例如,当鼠标指针在此示例中移动到Inner元素上时,鼠标悬停事件将被发送到该元素,然后逐渐渗透到外部.这可以在不合适的时间触发我们的绑定鼠标悬停处理程序.请参阅讨论以.mouseenter()获取有用的替代方案.

Answer 2

的MouseEnter和鼠标离开不应对事件冒泡,而鼠标悬停及移出做.

这是一篇描述行为的文章.