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天然的迭代器
Oct 29 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
Javascript函数式编程语言
Oct 11 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
layui表格数据重载
Jul 27 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 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屏蔽过滤指定关键字的方法
2014/11/03 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
在网页中屏蔽快捷键
2006/09/06 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
Python六大开源框架对比
2015/10/19 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python字符串的常见操作实例小结
2019/04/08 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
绩效专员岗位职责
2013/12/02 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
2014年工程师工作总结
2014/11/25 职场文书
电影复兴之路观后感
2015/06/02 职场文书
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
vue实现移动端div拖动效果
2022/03/03 Vue.js
详解如何使用Nginx解决跨域问题
2022/05/06 Servers