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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 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/01/11 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
JS hashMap实例详解
2016/05/26 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Python 3.x 新特性及10大变化
2015/06/12 Python
在Python中使用Neo4j的方法
2019/03/14 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
python使用配置文件过程详解
2019/12/28 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
个人简历自我评价
2014/02/02 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
中学生操行评语
2014/04/24 职场文书
感恩教育活动总结
2014/05/05 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
踏青活动策划方案
2014/08/19 职场文书
房屋出租委托书格式
2014/09/23 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
js 实现验证码输入框示例详解
2022/09/23 Javascript