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 style 中visibility和display之间的区别
Jan 22 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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 格式化数字的时候注意数字的范围
2010/04/13 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
python 远程统计文件代码分享
2015/05/14 Python
Python使用gensim计算文档相似性
2016/04/10 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
中科软笔试题和面试题
2014/10/07 面试题
求职自荐书范文
2013/12/04 职场文书
英语故事演讲稿
2014/04/29 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
营销经理工作检讨书
2014/11/03 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js