Jquery mouseenter() 与 mouseover()

Question

所以在阅读了最近回答的 question 之后我不清楚我是否真的理解 mouseenter() 和 mouseover() 之间的区别。该帖子指出

鼠标悬停():

Will fire upon entering an element and whenever any mouse movementsoccur within the element.

鼠标输入():

Will fire upon entering an element.

我想出了一个 fiddle使用两者，它们似乎非常相似。有人可以向我解释一下两者之间的区别吗？

我也试过阅读 JQuery 定义，两者都说同样的话。

The mouseover event is sent to an element when the mouse pointer enters the element

The mouseenter event is sent to an element when the mouse pointer enters the element.

谁能举例说明一下？

Answer 1

当您的目标元素包含子元素时，您会看到行为:

http://jsfiddle.net/ZCWvJ/7/

每次您的鼠标进入或离开子元素时，都会触发 mouseover，但不会触发 mouseenter。

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});

#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>