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 相关文章推荐
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 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
MySQL数据源表结构图示
2008/06/05 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
探究python中open函数的使用
2016/03/01 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python 实现简单的客户端认证
2020/07/29 Python
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
linux下进程间通信的方式
2014/12/23 面试题
幼儿园春游活动方案
2014/01/19 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
安全口号大全
2014/06/21 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书