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 相关文章推荐
自己整理的一个javascript日期处理函数
Oct 16 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python爬虫添加请求头代码实例
2019/12/28 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
写给女朋友的道歉信
2014/01/12 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
学校2014年度工作总结
2014/12/06 职场文书
小型婚礼主持词
2015/06/30 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript