jQuery mouseenter() 与 mouseover()

小编典典

jQuery mouseenter() 与 mouseover()

all

因此，在阅读了最近回答的问题后，我不清楚我是否真的理解和之间的mouseenter()区别mouseover()。该帖子称

鼠标移到（）：

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

鼠标输入（）：

进入元素时会触发。

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

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

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

当鼠标指针进入元素时，mouseenter 事件被发送到元素。

有人可以举例说明吗？

阅读 56

2022-08-05

共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>

2022-08-05