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 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
vue实现通讯录功能
Jul 14 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
javascript canvas时钟模拟器
Jul 13 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
js计算精度问题小结
2013/04/22 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python对json的相关操作实例详解
2017/01/04 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python实现屏保计时器的示例代码
2018/08/08 Python
Python读取实时数据流示例
2019/12/02 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
python简单实现最大似然估计&scipy库的使用详解
2020/04/15 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
程序员岗位职责
2013/11/11 职场文书
廉洁教育学习材料
2014/05/19 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python