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 实用的文字链提示框效果
Jun 30 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
ES6中Set和Map用法实例详解
Mar 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
学python安装的软件总结
2019/10/12 Python
Python jieba库用法及实例解析
2019/11/04 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
土木工程应届生自荐信
2013/09/24 职场文书
计算机专业自荐信
2013/10/14 职场文书
中专毕业自我鉴定
2013/10/16 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
征兵宣传标语
2014/06/20 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
结婚保证书
2015/01/16 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python