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

问题描述

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

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 ?

我也尝试读取JQuery定义，两者都说相同的话.

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

当鼠标指针进入元素时，mouseover事件将发送到该元素

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

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

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/

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

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()vs mouseover()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！