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 setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
JSONP之我见
Mar 24 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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循环输出数据库内容的代码
2008/05/24 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
php文件操作相关类实例
2015/06/18 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
收集的几个Python小技巧分享
2014/11/22 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
python 安装impala包步骤
2020/03/28 Python
python中四舍五入的正确打开方式
2021/01/18 Python
extern在函数声明中是什么意思
2014/01/19 面试题
后勤副校长自我鉴定
2013/10/13 职场文书
护士岗位职责
2014/02/16 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
优秀员工自荐书
2015/03/06 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL