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 相关文章推荐
利用浏览器全屏api实现js全屏
Jan 16 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
原生JS实现飞机大战小游戏
Jun 09 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 XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php检测useragent版本示例
2014/03/24 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
JavaScript 作用域实例分析
2019/10/02 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
建筑行业的大学生自我评价
2013/12/08 职场文书
班主任个人工作反思
2014/04/28 职场文书
主要负责人任命书
2014/06/06 职场文书
基层工作经验证明样本
2014/11/16 职场文书
单身证明范本
2015/06/15 职场文书
运动会开幕式主持词
2015/07/01 职场文书
学校运动会通讯稿
2015/07/18 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS