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脚本语言在网页中的简单应用
May 13 Javascript
js播放wav文件(源码)
Apr 22 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 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实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用Python实现一个简单的项目监控
2015/03/31 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
python版简单工厂模式
2017/10/16 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
delegate与普通函数的区别
2014/01/22 面试题
销售类个人求职信范文
2013/09/25 职场文书
学校节能减排倡议书
2014/05/16 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
银行给客户的感谢信
2015/01/23 职场文书
2015教师节通讯稿
2015/07/20 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python