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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
node.js实现端口转发
Apr 14 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 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实现生成带二维码图片并强制下载功能
2018/02/24 PHP
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
python 查找字符串是否存在实例详解
2017/01/20 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python高斯消除矩阵
2019/01/02 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
pytorch打印网络结构的实例
2019/08/19 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
信息与计算科学专业推荐信
2014/02/23 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2016高考寄语集锦
2015/12/04 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android