Jquery mouseenter()vs mouseover()

Question

所以阅读最近回答后,问题我很清楚,如果我真的明白之间的差别mouseenter()和mouseover().帖子说

鼠标移到():

进入元素时以及元素内发生任何鼠标移动时将触发.

的MouseEnter():

进入元素时会触发.

我想出了一个使用两者的小提琴,它们看起来非常相似.有人可以向我解释两者之间的区别吗？

我也尝试过阅读JQuery定义,两者都说同样的事情.

当鼠标指针进入元素时,鼠标悬停事件将发送到元素

当鼠标指针进入元素时,mouseenter事件将发送到元素.

有人可以用一个例子来澄清吗？

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>

Answer 2

这是我发现的最好的例子之一:

• 的mouseenter
• 鼠标移到
• 鼠标移开
• 鼠标离开

http://bl.ocks.org/mbostock/5247027

Answer 3

但是,虽然它们以相同的方式运行,但mouseenter只有当鼠标指针进入所选元素时才会触发事件.如果鼠标指针也进入任何子元素,mouseover则会触发该事件.