JavaScript阻止事件冒泡的两种方式（兼容性解决方案）

事件冒泡

当一个元素接收到事件的时候，开始时由具体的元素接收，然后逐级向上传播到DOM最顶层节点。

方法一

标准写法：利用事件对象里面的stopPropagation()方法

var div = document.querySelector('div')
        div.addEventListener('click', function(e) {
            e.stopPropagation()
        })

方法二

非标准写法：IE6-8 利用事件对象cancelBubble属性

 var div = document.querySelector('div')
        div.addEventListener('click', function(e) {
            e.cancelBubble = true // cancel 取消 Bubble 泡泡
        })

兼容性解决方案

 div.addEventListener('click', function(e) {
            if (e && e.stopPropagation) {
                e.stopPropagation()
            } else {
                window.event.cancelBubble = true
            }
        })

欢迎关注

掘金：juejin.cn/user/415657…

Github：github.com/zhubingran

CSDN：blog.csdn.net/qq_43118757

QQ：1330022055