鼠标移入和鼠标悬停事件有什么区别？

Question

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

它们是否有区别，如果有，应该在什么情况下使用？
（同样适用于mouseout与mouseleave）。

- Tom

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>

简而言之，当鼠标悬停在一个元素上时，您会注意到一个鼠标悬停事件发生在它上面——无论是来自其子元素还是父元素，但只有当鼠标从该元素外部移动到该元素时，才会发生鼠标进入事件。

或者，正如文档中所述的mouseover()：

“[.mouseover()]由于事件冒泡可能会引起许多头痛。例如，在此示例中，当鼠标指针移到 Inner 元素上时，将向其发送鼠标悬停事件，然后向外层传递。这可能会在不恰当的时间触发我们绑定的鼠标悬停处理程序。有关实用替代方法，请参见 .mouseenter() 的讨论。”

- Keith Bentrup

---

mouseenter事件不是只有在鼠标从父元素移动到该元素时才会触发。该事件会在鼠标从元素外部进入到内部时触发，无论鼠标来自哪个元素。虽然通常鼠标会来自父元素，但并非总是如此。例如，如果父元素没有填充或边框，则鼠标可以直接从祖父元素进入，此时mouseenter事件仍将触发。实际上，它甚至可以从视窗外面进入元素（如果该元素恰好位于边缘），并且事件仍会触发。 - callum

演示是最好的解释 ;) - Luckylooke

真正的话，只需在演示中玩耍即可。 - Kevin Wheeler

Answer 2

Mouseenter和mouseleave不会响应事件冒泡，而mouseover和mouseout会。

这里有一篇文章描述了这种行为。

- Joseph

---

这个链接完美地解释了这件事情：http://bl.ocks.org/mbostock/5247027 在容器内部每次触发时都会激活mouseover事件，这是由于事件冒泡造成的。 - Rafael Emshoff

Answer 3

通常，像这样的问题，Quirksmode有最佳答案。

我想，因为jQuery的一个目标是使事物浏览器无关，使用任何事件名称都会触发相同的行为。编辑：感谢其他帖子，我现在看到这不是这种情况。

- Peter Bailey

Answer 4

$(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);})
 });

- naveed

---

如果您的元素没有子元素，则它们的行为会有所不同，但如果该元素具有子元素，则这些对会表现出截然不同的行为。简而言之，如果您将鼠标移动到一个元素中，然后移动到其子元素中，mouseover/mouseout 会同时触发，而只有 mouseenter 会触发，因为您的鼠标仍然在元素内部。 - naveed

我认为这里的事件名称是错误的。 - Kevin Beal