Jquery mouseenter() 与 mouseover() [英] Jquery mouseenter() vs mouseover()

问题描述

所以在阅读了最近回答的问题后，我不清楚我是否真的理解 之间的区别mouseenter() 和 mouseover().帖子说

MouseOver():

<块引用>

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

鼠标输入():

<块引用>

将在进入元素时触发.

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

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

<块引用>

鼠标指针进入元素时向元素发送 mouseover 事件

当鼠标指针进入元素时，向元素发送 mouseenter 事件.

有人可以举例说明一下吗?

解决方案

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

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 {填充:0 20px 20px 0；背景色:#eee;底边距:10px；宽度:90px；溢出:隐藏；}#my_div>div {向左飘浮;边距:20px 0 0 20px；高度:25px；宽度:25px；背景颜色:#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>

So after reading a recently answered question i am unclear if i really understand the difference between the mouseenter() and mouseover(). The post states

MouseOver():

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

MouseEnter():

Will fire upon entering an element.

I came up with a fiddle that uses both and they seem to be quite similar. Can someone please explain to me the difference between the two ?

I have also tried reading the JQuery definitions, both say the same thing.

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.

Can someone please clarify with an example?

解决方案

You see the behavior when your target element contains child elements:

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

Each time your mouse enters or leaves a child element, mouseover is triggered, but not 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>

这篇关于Jquery mouseenter() 与 mouseover()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！