相信做前端开发的都听说过“冒泡型事件”吧,《JavaScript高级程序设计》第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签,标签上有2个按钮,当且仅当鼠标移入 li 时才会显示上面的2个按钮,如下图,左边是默认状态,右边是鼠标移入状态,开始使用的是 mouseover 和 mouseout ,结果鼠标移动到按钮上时,按钮会出现闪烁的情况。

    

后来对比了mouseover,mouseout,mouseenter,mouseleave的区别发现,mouseover 和 mouseout 在鼠标移入移出时会触发其父级元素的 mouseover,mouseout 方法,而 mouseenter,mouseleave 只会触发当前鼠标移入和移出元素的方法。换句话说,后两者是不冒泡的事件,前两者是会冒泡的事件。

下面是实验详细:

  1. <div id="mouseEventTest">
  2. <span id="parent">aaaaaaaaaaaaaaa<span id="child">bbbbbbbbbb</span></span>
  3. </div>

页面如下:

简单的css代码:

  1. span{
  2. padding: 10px;
  3. width: auto;
  4. line-height: 30px;
  5. }

parent 和 child 的 mouseover,mouseout,mouseenter,mouseleave 方法如下:

  1. function parentMouseOver(e) {
  2. console.log('parentMouseOver');
  3. }
  4. function parentMouseOut(e) {
  5. console.log('parentMouseOut');
  6. }
  7. function childMouseOver(e) {
  8. console.log('childMouseOver');
  9. }
  10. function childMouseOut(e) {
  11. console.log('childMouseOut');
  12. }
  13. function parentMouseEnter(e) {
  14. console.log('parentMouseEnter');
  15. }
  16. function parentMouseLeave(e) {
  17. console.log('parentMouseLeave');
  18. }
  19. function childMouseEnter(e) {
  20. console.log('childMouseEnter');
  21. }
  22. function childMouseLeave(e) {
  23. console.log('childMouseLeave');
  24. }

分别设置两组绑定:

1)mouseover,mouseout

  1. $("#parent").bind('mouseover',parentMouseOver);
  2. $("#parent").bind('mouseout',parentMouseOut);
  3. $("#child").bind('mouseover',childMouseOver);
  4. $("#child").bind('mouseout',childMouseOut);

2)mouseenter,mouseleave

  1. $("#parent").bind('mouseenter', parentMouseEnter);
  2. $("#parent").bind('mouseleave', parentMouseLeave);
  3. $("#child").bind('mouseenter', childMouseEnter);
  4. $("#child").bind('mouseleave', childMouseLeave);

操作方式是:鼠标从 parent 左边移入,然后从右边移出。

绑定的结果如下:

1)组(四个红框分别是:进入 parent ,从 parent 到 child ,从 child  到 parent ,移出 parent):

2)组:

实验结果可以清晰地看出 mouseover,mouseout,mouseenter,mouseleave 的区别。

mouseover,mouseout,mouseenter,mouseleave的区别的更多相关文章

  1. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

  2. mouseover,mouseout,mouseenter,mouseleave的区别

    1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...

  3. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  4. 你可能不知道的mouseover/mouseout mouseenter/mouseleave

    mouseover与mouseenter 1. 触发时机 mouseover在被监听的节点与子节点上都会触发 mouseenter只在被监听的节点上触发 本质上是因为mouseenter不能冒泡 2. ...

  5. 理解mouseover,mouseout,mouseenter,mouseleave

    mouseover定义和用法 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. mouseover() 方法触发 mouseover ...

  6. mouseover,mouseout和mouseenter,mouseleave的区别及适用情况

    在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...

  7. mouseover和mouseenter,mouseout和mouseleave的区别-引发的探索

    相信小伙伴们都用过鼠标事件,比如mouseover和mouseout,mouseenter和mouseleave.它们都分别表示鼠标移入移出. 在使用的过程中,其实一直有个小疑问——它们之间究竟有什么 ...

  8. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  9. mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...

  10. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

随机推荐

  1. Hibernate征途(六)之数量和关系映射

    本来如果和关系模型一样,只需要一对一.一对多.多对多映射就够了,但是前面<Hibernate征途(四)之映射 序>中说到,对象模型中关联是有方向的,所以对一对多而言,就会产生一对多还是多对 ...

  2. iOS开发——数据持久化&使用NSUserDefaults来进行本地数据存储

    使用NSUserDefaults来进行本地数据存储   NSUserDefaults适合存储轻量级的本地客户端数据,比如记住密码功能,要保存一个系统的用户名.密码.使用NSUserDefaults是首 ...

  3. [Effective C++ --031]将文件间的编译依存关系降至最低

    引言:编译时间成本 在项目中我们都会碰到修改既存类的情况:某个class实现文件做了些轻微改变,修改的不是接口,而是实现,而且只改private成分. 重新build这个程序,并预计只花数秒就好,当按 ...

  4. 增加字段关联插件 For PHPCMS V9 免费版

    增加字段关联插件 For PHPCMS V9 免费版 第一:增加字段选择关联 第二:关联后的效果 烈火下载友情提示:增加方法详见附件内的说明文档. 附件下载

  5. 小白日记35:kali渗透测试之Web渗透-手动漏洞挖掘(一)-默认安装引发的漏洞

    手动漏洞挖掘 即扫描后,如何对发现的漏洞告警进行验证. #默认安装 流传linux操作系统比windows系统安全的说法,是因为windows系统默认安装后,会开放很多服务和无用的端口,而且未经过严格 ...

  6. 小白日记13:kali渗透测试之服务扫描(三)-SMTB扫描、防火墙识别、负载均衡识别、WAF识别

    SMTP扫描 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式.SMTP协议属于TCP/ ...

  7. linux中的等待队列

    最近看epoll 和 select 都涉及到一个东西叫做设备等待队列,等待队列是如何工作的,内核是怎么管理的?看这篇文章 问题:进程是如何组织起来的?我们知道,进程是有很多种状态的:include/l ...

  8. Android(java)学习笔记115:Android InputMethodManager输入法简介

    正文 一.结构 public final class InputMethodManager extends Object Java.lang.Object android.view.inputmeth ...

  9. Android(java)学习笔记93:Android布局详解之一:FrameLayout

    FrameLayout是最简单的布局了.所有放在布局里的控件,都按照层次堆叠在屏幕的左上角.后加进来的控件覆盖前面的控件. 在FrameLayout布局里,定义任何空间的位置相关的属性都毫无意义.控件 ...

  10. JS 控制文本框只能输入中文、英文、数字与指定特殊符号

    想做姓名输入的js判断是否是中文,但是网上找的很多是源于一篇文章的,判断中文的正则式不对,后来找到一个可以准确判断了,但是是监测里面有中文的就行,跟我想要的只能输入中文的意思相左,所以又找了下面的 J ...