首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Jquery mouseenter() vs mouseover()

Jquery mouseenter() vs mouseover()
EN

Stack Overflow用户
提问于 2011-09-03 00:31:47
回答 6查看 114.5K关注 0票数 178

因此,在阅读了最近回复的question之后,我不清楚我是否真的理解了mouseenter()mouseover()之间的区别。这篇文章写道

MouseOver():

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

MouseEnter():

将在输入元素时触发。

我想出了一个同时使用两者的fiddle,它们看起来非常相似。有人能给我解释一下这两者的区别吗?

我也尝试过读取JQuery的定义,两者的含义是一样的。

当鼠标指针进入某个元素时,将向该元素发送mouseover事件

当鼠标指针进入某个元素时,将向该元素发送mouseenter事件。

有没有人能举个例子来说明一下?

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2011-09-03 00:45:10

当你的目标元素包含子元素时,你会看到这样的行为:

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

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

代码语言:javascript
复制
$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});
代码语言:javascript
复制
#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;
}
代码语言:javascript
复制
<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>

票数 281
EN

Stack Overflow用户

发布于 2013-05-03 23:25:06

尽管它们的操作方式相同,但mouseenter事件仅在鼠标指针进入所选元素时触发。如果鼠标指针进入任何子元素以及,则会触发事件。

票数 16
EN

Stack Overflow用户

发布于 2011-09-03 00:38:05

请参阅jquery文档页面底部的示例代码和演示:

http://api.jquery.com/mouseenter/

...当指针移入子元素时,mouseover也会触发,而mouseenter仅在指针移入绑定的元素时触发。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7286532

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档