JS阻止事件冒泡_js 点击阻止事件冒泡-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44021199/article/details/97177535

不同浏览器下怎样阻止事件冒泡：

标准浏览器下：e.stopPropagation();
ie浏览器下：e.cancelBubble = true;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1{
            width: 300px;
            height: 300px;
            background: #ff0000;
        }
        #div2{
            width: 200px;
            height: 200px;
            background: #0000ff;
        }
        
    </style>
</head>
<body>
    <div id="div1">
        111
        <div id="div2">
            222
        </div>
    </div>
    <script>
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        oDiv1.onclick = function(){
            console.log('div1');
        }
        oDiv2.onclick = function(e){
            e = e || window.event;
            console.log('div2');
            // 阻止事件冒泡  标准浏览器
            e.stopPropagation();
            // ie浏览器
            e.cancelBubble = true;
        }
    </script>
</body>
</html>

一般情况下，点击div2，控制台会依次输出div2 div1 ,这种现象称为事件冒泡，点击子元素，会触发父元素点击事件，为了阻止这种情况发生；采取上面方法结果如图所示：
点击div1时，输出div1，点击div2时，正常输出div2，阻止了事件冒泡！