章节
问答
课签
笔记
评论
占位
占位

jQuery鼠标事件之mouseenter与mouseleave事件

用交互操作中,经常需要知道用户操作鼠标是否有移到元素内部或是元素外部,因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作

使用上非常简单,三种参数传递方式与mouseover和mouseout是一模一样的,所以这里不再重复,主要讲讲区别,下面以mouseenter为例:

mouseenter JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用,jQuery的模拟这一事件,以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。

mouseenter事件和mouseover的区别

关键点就是:冒泡的方式处理问题

简单的例子:

mouseover为例:

<div class="aaron2">
    <p>鼠标离开此区域触发mouseleave事件</p>
</div>

如果在p元素与div元素都绑定mouseover事件,鼠标在离开p元素,但是没有离开div元素的时候,触发的结果:

  1. p元素响应事件
  2. div元素响应事件

这里的问题是div为什么会被触发? 原因就是事件冒泡的问题,p元素触发了mouseover,他会一直往上找父元素上的mouseover事件,如果父元素有mouseover事件就会被触发

所以在这种情况下面,jQuery推荐我们使用 mouseenter事件

mouseenter事件只会在绑定它的元素上被调用,而不会在后代节点上被触发


这就是最本质的区别,具体的对应可以参考右边的案例:

PS:同学可以根据右侧代码,自己写出mouseout与mouseleave的区别哦~

任务

?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

已采纳回答 / VictorChan
好像是的 其实进入元素内部时已经触发

最新回答 / 藕片水电费
借楼 同问 不应该是父节点吗 怎么会是后代

已采纳回答 / Dong大瓜
mouseover 事件要考虑到事件冒泡,也就是a的父级元素也有绑定mouseover事件的话,那么a的事件触发的同时也会触发父级元素的事件

最赞回答 / 莫龙吟啸
子元素的移出等于父元素的移入,即每块区域进去时+1出来时+1

已采纳回答 / 慕雪6446870
上面那个i是对于mouseover来实现的,所以在div里面移动i还是会增加

最新回答 / 慕仙5521175
去掉e效果一样。放在p上时因为冒泡了,所以外面的盒子中的mouseover事件也被触发了,所以两个数都变;i和n是计数器,不是定时器,用了两个计数器。

最赞回答 / 趴在地上飞
应该涉及到了mouseover与mouseenter的冒泡问题了,mouseover绑定时,进入子元素时也会触发,但是mousenter就不会.

最新回答 / 淡水狗
mouseover的意思是:当鼠标指针位于元素上方时,会触发事件。 所以不管移到绿色哪个位置都是在元素上方,就会增加触发次数。而mouseenter是穿过元素时,才触发的事件。所以只在绿色框内移动 不会增加触发次数我是这么理解的~ 

已采纳回答 / Vegetable_Bird菜鸟
它们在同一个html中,使用了相同的变量,换一个别的字母变量就好了

已采纳回答 / qq_TO世界尽头_03751774
mouseover会被冒泡触发,给外层绑定的时候,内层事件的冒泡就会触发外层的事件,但是mouseenter不会被冒泡触发,把它绑定在外层,虽然内层冒泡了,但是外层不会被触发。个人理解。

最新回答 / 藕片水电费
我也觉得他的逻辑有问题,他的逻辑应该是:不会在他的父代节点上触发
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言