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 相关文章推荐
取得父标签
Nov 14 Javascript
点图片上一页下一页翻页效果
Jul 09 Javascript
jquery遍历input取得input的name
Apr 27 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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
mysq GBKl乱码
2006/11/28 PHP
PHP学习之整理字符串
2011/04/17 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
ES6的新特性概览
2016/03/10 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python 获取字符串MD5值方法
2018/05/29 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Python环境管理virtualenv&virtualenvwrapper的配置详解
2020/07/01 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
python实现定时发送邮件
2020/12/23 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
闭幕式主持词
2014/04/02 职场文书
好的促销活动方案
2014/08/21 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
护士自荐信范文
2015/03/25 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA