JavaScript阻止事件冒泡示例分享


Posted in Javascript onDecember 28, 2014

之前遇到事件冒泡的问题,也去网上搜索了一番,结果大部分都是一样的代码,贴来用时也不太顺利。涉及到FF时,可以用 e.stopPropagation(); ,不知怎地我没用成功。不过我发现FF支持e.cancelBubble = true;的写法,经测试可行。就把代码贴在这里吧,省得以后到处找。IE以前版本的兼容性还没测试,用到时再完善吧。

 

//取消事件冒泡

function stopBubble(e) {

    var evt = (e) ? e : window.event;//兼容FF

    evt.cancelBubble = true;  //evt.stopPropagation();  FF下阻止冒泡,据说可以用

};

另:

1、cancelBubble(HTML DOM Event 对象属性) :如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。

2、stopPropagation(HTML DOM Event 对象方法):终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

3、 preventDefault(HTML DOM Event 对象方法)通知浏览器不要执行与事件关联的默认动作。

例子:
    function stopBubble(e) 
    { 
        if (e && e.stopPropagation) 
            e.stopPropagation() 
        else
            window.event.cancelBubble=true
    } 

把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了

Javascript 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
jQuery中removeData()方法用法实例
Dec 27 #Javascript
jQuery中data()方法用法实例
Dec 27 #Javascript
jQuery中index()方法用法实例
Dec 27 #Javascript
jQuery中get()方法用法实例
Dec 27 #Javascript
jQuery的context属性用法实例
Dec 27 #Javascript
jQuery对象的selector属性用法实例
Dec 27 #Javascript
jQuery对象的length属性用法实例
Dec 27 #Javascript
You might like
php 结果集的分页实现代码
2009/03/10 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
javascript 操作符(~、&、|、^、)使用案例
2014/12/31 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
python中assert用法实例分析
2015/04/30 Python
python操作列表的函数使用代码详解
2017/12/28 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
Python之字典添加元素的几种方法
2020/09/30 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
优秀生推荐信范文
2013/11/28 职场文书
自我评价中英文语句
2013/11/30 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
技术员个人工作总结
2015/03/03 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python