博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
鼠标mouse事件冒泡处理
阅读量:5878 次
发布时间:2019-06-19

本文共 1854 字,大约阅读时间需要 6 分钟。

简单的鼠标移动事件:

进入

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

移出

mouseleave: 不冒泡mouseout:冒泡不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件

 

我们通过一个案例观察下问题:

给一个嵌套的层级绑定mouseout事件,会发现mouseout事件与想象的不一样

我们发现一个问题mouseout事件:

  1. 无法阻止冒泡
  2. 在内部的子元素上也会触发

 


 同样的问题还有mouseover事件,那么在stopPropagation方法失效的情况下我们要如何停止冒泡呢?

  • 为了阻止mouseover和mouseout的反复触发,这里要用到event对象的一个属性relatedTarget,这个属性就是用来判断 mouseover和mouseout事件目标节点的相关节点的属性。简单的来说就是当触发mouseover事件时,relatedTarget属性代表的就是鼠标刚刚离开的那个节点,当触发mouseout事件时它代表的是鼠标移向的那个对象。由于MSIE不支持这个属性,不过它有代替的属性,分别是 fromElement和toElement。
  •     有了这个属性,我们就能够清楚的知道我们的鼠标是从哪个对象移过来,又是要移动到哪里去了。这样我们就能够通过判断这个相关联的对象是否在我们要触发事件的对象的内部,或者是不是就是这个对象本身。通过这个判断我们就能够合理的选择是否真的要触发事件。
  •     这里我们还用到了一个用于检查一个对象是否包含在另外一个对象中的方法,contains方法。MSIE和FireFox分别提供了检查的方法,这里封装了一个函数。

jQuery的处理也是如出一辙

jQuery.each({        mouseenter: "mouseover",        mouseleave: "mouseout",        pointerenter: "pointerover",        pointerleave: "pointerout"    }, function(orig, fix) {        jQuery.event.special[orig] = {            delegateType: fix,            bindType: fix,            handle: function(event) {                var ret,                    target = this,                    related = event.relatedTarget,                    handleObj = event.handleObj;                // For mousenter/leave call the handler if related is outside the target.                // NB: No relatedTarget if the mouse left/entered the browser window                if (!related || (related !== target && !jQuery.contains(target, related))) {                    event.type = handleObj.origType;                    ret = handleObj.handler.apply(this, arguments);                    event.type = fix;                }                return ret;            }        };    });

 本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/4241531.html,如需转载请自行联系原作者

你可能感兴趣的文章
福利丨所有AI安全的讲座里,这可能是最实用的一场
查看>>
开发完第一版前端性能监控系统后的总结(无代码)
查看>>
Python多版本情况下四种快速进入交互式命令行的操作技巧
查看>>
MySQL查询优化
查看>>
【Redis源码分析】如何在Redis中查找大key
查看>>
关于链接文件的探讨
查看>>
android app启动过程(转)
查看>>
Linux—源码包安装
查看>>
JDK8中ArrayList的工作原理剖析
查看>>
安装gulp及相关插件
查看>>
如何在Linux用chmod来修改所有子目录中的文件属性?
查看>>
Applet
查看>>
高并发环境下,Redisson实现redis分布式锁
查看>>
乌克兰基辅一世遗修道院起火 现场火光照亮夜空
查看>>
[iOS 10 day by day] Day 2:线程竞态检测工具 Thread Sanitizer
查看>>
Centos/Ubuntu下安装nodejs
查看>>
关于浏览器的cookie
查看>>
Hyper-V 2016 系列教程30 机房温度远程监控方案
查看>>
国内先进的智能移动广告聚合平台-KeyMob聚合
查看>>
我的友情链接
查看>>