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)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了

您可能感兴趣的文章:

JS控制弹出悬浮窗口(一览画面)的实例代码
这篇文章主要介绍了JS控制弹出悬浮窗口(一览画面)的实例代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-05-05
JS实现“隐藏与显示”功能(多种方法)
这篇文章主要介绍了JS实现“隐藏与显示”功能的多种方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-11-11
JavaScript实现简单图片翻转的方法
这篇文章主要介绍了JavaScript实现简单图片翻转的方法,涉及javascript操作图片与数组的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
基于javascript数组实现图片轮播
这篇文章主要为大家详细介绍了基于javascript数组实现图片轮播的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
第一次接触Bootstrap框架
这篇文章主要为大家详细介绍了Bootstrap框架,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
JS查看对象功能代码
通过JS查看到一个页面有些什么对象的实现代码
2008-04-04
JS实现简单日历特效
这篇文章主要为大家详细介绍了JS实现简单日历特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
html5+canvas实现支持触屏的签名插件教程
jq-signature.js是一个帮助你创建签名的jQuery插件，允许你的用户使用鼠标，手指或者铅笔生成签名。下面这篇文章主要给大家介绍了利用html5+canvas实现支持触屏的签名插件的相关资料，需要的朋友可以参考下。
2017-05-05
使用微信小程序开发弹出框应用实例详解
本文通过实例代码给大家介绍了使用微信小程序开发弹出框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-10-10
JS中window.open全屏命令解析及使用示例
window.open想必大家对它并不陌生吧，那么如何让它全屏就有些朋友不知道了，下面为大家介绍下其常用的命令及如何全屏
2013-12-12