JavaScript和JQuery的鼠标mouse事件冒泡处理


Posted in Javascript onJune 19, 2015

简单的鼠标移动事件:

进入

mouseenter:不冒泡

mouseover: 冒泡

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

移出

mouseleave: 不冒泡

mouseout:冒泡

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

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

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

<!DOCTYPE html><div class="out overout" style="width:40%;height:120px; margin:0 15px;background-color:#D6EDFC;float:left;" data-mce-style="width: 40%; height: 120px; margin: 0 15px; background-color: #d6edfc; float: left;"><p style="border:1px solid red" data-mce-style="border: 1px solid red;">外部子元素</p><div class="in overout" style="width:60%;background-color:#FFCC00;margin:10px auto;" data-mce-style="width: 60%; background-color: #ffcc00; margin: 10px auto;"><p style="border:1px solid red" data-mce-style="border: 1px solid red;">内部子元素</p><p id="inshow">0</p>

    </div><p id="outshow">0</p>

</div><script type="text/javascript">
    var i = 0;

    var k = 0;
    document.querySelectorAll('.out')[0].addEventListener('mouseout',function(e){

        document.querySelectorAll("#inshow")[0].textContent = (++i)

       e.stopPropagation();

    },false)
   document.querySelectorAll('.in')[0].addEventListener('mouseout',function(){

       document.querySelectorAll("#outshow")[0].textContent = (++k)

    },false)
</script>

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

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

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

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

            }

        };

    });
Javascript 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
JS字符串处理实例代码
Aug 05 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
TypeScript 中接口详解
Jun 19 #Javascript
TypeScript 学习笔记之基本类型
Jun 19 #Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 #Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 #Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 #Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 #Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 #Javascript
You might like
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
Python笔记之工厂模式
2019/11/20 Python
热能动力工程毕业生自荐信
2013/11/07 职场文书
给校长的建议书100字
2014/05/16 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
安全先进班组材料
2014/12/26 职场文书
追悼会答谢词
2015/01/05 职场文书
工作会议通知
2015/04/15 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
2016年母亲节广告语
2016/01/28 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server