JavaScript阻止事件冒泡示例分享

 更新时间:2014年12月28日 09:12:18   投稿:hebedich  
这篇文章主要分享了一则JavaScript阻止事件冒泡示例,需要的朋友可以参考下

之前遇到事件冒泡的问题,也去网上搜索了一番,结果大部分都是一样的代码,贴来用时也不太顺利。涉及到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实例--教你实现扑克牌洗牌功能

    我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐(记得小时候打牌两副牌手都抓不过来),这篇随笔就是想通过实现这个功能来熟悉下js中排序数组等相关知识。
    2014-05-05
  • Javascript 鼠标移动上去 滑块跟随效果代码分享

    Javascript 鼠标移动上去 滑块跟随效果代码分享

    这篇文章主要介绍了Javascript 鼠标移动上去 滑块跟随效果代码,有需要的朋友可以参考一下
    2013-11-11
  • js前端加密库Crypto-js进行MD5/SHA256/BASE64/AES加解密的方法与示例

    js前端加密库Crypto-js进行MD5/SHA256/BASE64/AES加解密的方法与示例

    js加密解密可以使用crypto-js它可以进行MD5、SHA-1、SHA-256、Base64、AES、DES、等算法和加密,这是一个对称加密的库,可以使用 AES、DES、但没有rsa等非对称加密的方法
    2023-12-12
  • javascript浅层克隆、深度克隆对比及实例解析

    javascript浅层克隆、深度克隆对比及实例解析

    这篇文章主要介绍了javascript浅层克隆、深度克隆对比及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • ES6顶层对象、global对象实例分析

    ES6顶层对象、global对象实例分析

    这篇文章主要介绍了ES6顶层对象、global对象,结合实例形式分析了ES6顶层对象与global对象的概念、原理、用法及相关操作注意事项,需要的朋友可以参考下
    2019-06-06
  • js继承实现方法详解

    js继承实现方法详解

    这篇文章主要介绍了js继承实现方法,结合实例形式分析了javascript继承的实现方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • JS实现文字放大效果的方法

    JS实现文字放大效果的方法

    这篇文章主要介绍了JS实现文字放大效果的方法,实例分析了javascript鼠标事件控制css样式的技巧,需要的朋友可以参考下
    2015-03-03
  • JavaScript中使用Object.create()创建对象介绍

    JavaScript中使用Object.create()创建对象介绍

    这篇文章主要介绍了JavaScript中使用Object.create()创建对象介绍,本文先是讲解了语法,然后给出了创建实例,需要的朋友可以参考下
    2014-12-12
  • JS+canvas绘制的动态机械表动画效果

    JS+canvas绘制的动态机械表动画效果

    这篇文章主要介绍了JS+canvas绘制的动态机械表动画效果,涉及javascript结合HTML5 canvas简单数值计算与动态绘图相关操作技巧,需要的朋友可以参考下
    2017-09-09
  • 原生JS实现留言板

    原生JS实现留言板

    这篇文章主要为大家详细介绍了原生JS实现留言板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论