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 相关文章推荐
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
js数组去重的hash方法
Dec 22 Javascript
javaScript中的空值和假值
Dec 18 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
javascript实现文字跑马灯效果
Jun 18 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 404错误页面实现代码
2009/06/22 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
phpfpm的作用和用法
2019/10/10 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
js加解密 脚本解密
2008/02/22 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vue删除html内容的标签样式实例
2018/09/13 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
Python logging设置和logger解析
2019/08/28 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
培训班开班仪式主持词
2014/03/28 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
建国大业观后感800字
2015/06/01 职场文书
党章学习心得体会2016
2016/01/14 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
教你用python实现12306余票查询
2021/06/30 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript