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 页面滚动到底部自动加载插件集合
Jan 31 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
用几道面试题来看JavaScript执行机制
Apr 30 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
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中文本数据翻页(留言本翻页)
2006/10/09 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
js实现移动端轮播图
2020/12/21 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
女方婚礼新郎答谢词
2014/01/11 职场文书
电气自动化求职信
2014/06/24 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书