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 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
js实现图片无缝滚动
Dec 23 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 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
重置版战役片段
2020/04/09 魔兽争霸
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
python xpath获取页面注释的方法
2019/01/14 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
Sony C++笔试题
2013/03/10 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
工作建议书范文
2014/05/13 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
田径运动会广播稿
2015/08/19 职场文书
教师个人教学反思
2016/02/23 职场文书
初中语文教学反思范文
2016/03/03 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技