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 相关文章推荐
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
Node.js返回JSONP详解
May 18 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
Nest.js散列与加密实例详解
Feb 24 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基础知识介绍
2013/09/17 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
php图像验证码生成代码
2017/06/08 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
filemanage功能中用到的common.js
2007/04/08 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JS中数组重排序方法
2016/11/11 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Django  ORM 练习题及答案
2019/07/19 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
大四自我鉴定
2014/02/08 职场文书
《春天来了》教学反思
2014/04/07 职场文书
移风易俗倡议书
2014/04/15 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
关于感谢信的范文
2015/01/23 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
防暑降温通知书
2015/04/27 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP