mouseover,mouseout,mouseenter,mouseleave的区别
相信做前端开发的都听说过“冒泡型事件”吧,《JavaScript高级程序设计》第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签,标签上有2个按钮,当且仅当鼠标移入 li 时才会显示上面的2个按钮,如下图,左边是默认状态,右边是鼠标移入状态,开始使用的是 mouseover 和 mouseout ,结果鼠标移动到按钮上时,按钮会出现闪烁的情况。
后来对比了mouseover,mouseout,mouseenter,mouseleave的区别发现,mouseover 和 mouseout 在鼠标移入移出时会触发其父级元素的 mouseover,mouseout 方法,而 mouseenter,mouseleave 只会触发当前鼠标移入和移出元素的方法。换句话说,后两者是不冒泡的事件,前两者是会冒泡的事件。
下面是实验详细:
- <div id="mouseEventTest">
- <span id="parent">aaaaaaaaaaaaaaa<span id="child">bbbbbbbbbb</span></span>
- </div>
页面如下:
简单的css代码:
- span{
- padding: 10px;
- width: auto;
- line-height: 30px;
- }
parent 和 child 的 mouseover,mouseout,mouseenter,mouseleave 方法如下:
- function parentMouseOver(e) {
- console.log('parentMouseOver');
- }
- function parentMouseOut(e) {
- console.log('parentMouseOut');
- }
- function childMouseOver(e) {
- console.log('childMouseOver');
- }
- function childMouseOut(e) {
- console.log('childMouseOut');
- }
- function parentMouseEnter(e) {
- console.log('parentMouseEnter');
- }
- function parentMouseLeave(e) {
- console.log('parentMouseLeave');
- }
- function childMouseEnter(e) {
- console.log('childMouseEnter');
- }
- function childMouseLeave(e) {
- console.log('childMouseLeave');
- }
分别设置两组绑定:
1)mouseover,mouseout
- $("#parent").bind('mouseover',parentMouseOver);
- $("#parent").bind('mouseout',parentMouseOut);
- $("#child").bind('mouseover',childMouseOver);
- $("#child").bind('mouseout',childMouseOut);
2)mouseenter,mouseleave
- $("#parent").bind('mouseenter', parentMouseEnter);
- $("#parent").bind('mouseleave', parentMouseLeave);
- $("#child").bind('mouseenter', childMouseEnter);
- $("#child").bind('mouseleave', childMouseLeave);
操作方式是:鼠标从 parent 左边移入,然后从右边移出。
绑定的结果如下:
1)组(四个红框分别是:进入 parent ,从 parent 到 child ,从 child 到 parent ,移出 parent):
2)组:
实验结果可以清晰地看出 mouseover,mouseout,mouseenter,mouseleave 的区别。
mouseover,mouseout,mouseenter,mouseleave的区别的更多相关文章
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...
- mouseover,mouseout,mouseenter,mouseleave的区别
1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
- 你可能不知道的mouseover/mouseout mouseenter/mouseleave
mouseover与mouseenter 1. 触发时机 mouseover在被监听的节点与子节点上都会触发 mouseenter只在被监听的节点上触发 本质上是因为mouseenter不能冒泡 2. ...
- 理解mouseover,mouseout,mouseenter,mouseleave
mouseover定义和用法 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. mouseover() 方法触发 mouseover ...
- mouseover,mouseout和mouseenter,mouseleave的区别及适用情况
在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...
- mouseover和mouseenter,mouseout和mouseleave的区别-引发的探索
相信小伙伴们都用过鼠标事件,比如mouseover和mouseout,mouseenter和mouseleave.它们都分别表示鼠标移入移出. 在使用的过程中,其实一直有个小疑问——它们之间究竟有什么 ...
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...
- 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
随机推荐
- Hibernate征途(六)之数量和关系映射
本来如果和关系模型一样,只需要一对一.一对多.多对多映射就够了,但是前面<Hibernate征途(四)之映射 序>中说到,对象模型中关联是有方向的,所以对一对多而言,就会产生一对多还是多对 ...
- iOS开发——数据持久化&使用NSUserDefaults来进行本地数据存储
使用NSUserDefaults来进行本地数据存储 NSUserDefaults适合存储轻量级的本地客户端数据,比如记住密码功能,要保存一个系统的用户名.密码.使用NSUserDefaults是首 ...
- [Effective C++ --031]将文件间的编译依存关系降至最低
引言:编译时间成本 在项目中我们都会碰到修改既存类的情况:某个class实现文件做了些轻微改变,修改的不是接口,而是实现,而且只改private成分. 重新build这个程序,并预计只花数秒就好,当按 ...
- 增加字段关联插件 For PHPCMS V9 免费版
增加字段关联插件 For PHPCMS V9 免费版 第一:增加字段选择关联 第二:关联后的效果 烈火下载友情提示:增加方法详见附件内的说明文档. 附件下载
- 小白日记35:kali渗透测试之Web渗透-手动漏洞挖掘(一)-默认安装引发的漏洞
手动漏洞挖掘 即扫描后,如何对发现的漏洞告警进行验证. #默认安装 流传linux操作系统比windows系统安全的说法,是因为windows系统默认安装后,会开放很多服务和无用的端口,而且未经过严格 ...
- 小白日记13:kali渗透测试之服务扫描(三)-SMTB扫描、防火墙识别、负载均衡识别、WAF识别
SMTP扫描 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式.SMTP协议属于TCP/ ...
- linux中的等待队列
最近看epoll 和 select 都涉及到一个东西叫做设备等待队列,等待队列是如何工作的,内核是怎么管理的?看这篇文章 问题:进程是如何组织起来的?我们知道,进程是有很多种状态的:include/l ...
- Android(java)学习笔记115:Android InputMethodManager输入法简介
正文 一.结构 public final class InputMethodManager extends Object Java.lang.Object android.view.inputmeth ...
- Android(java)学习笔记93:Android布局详解之一:FrameLayout
FrameLayout是最简单的布局了.所有放在布局里的控件,都按照层次堆叠在屏幕的左上角.后加进来的控件覆盖前面的控件. 在FrameLayout布局里,定义任何空间的位置相关的属性都毫无意义.控件 ...
- JS 控制文本框只能输入中文、英文、数字与指定特殊符号
想做姓名输入的js判断是否是中文,但是网上找的很多是源于一篇文章的,判断中文的正则式不对,后来找到一个可以准确判断了,但是是监测里面有中文的就行,跟我想要的只能输入中文的意思相左,所以又找了下面的 J ...