DOM基础之事件冒泡

&练习时长两年半

于 2019-08-24 14:02:07 发布

阅读量156

点赞数 3

文章标签：事件冒泡 dom 前端 web

本文链接：https://blog.youkuaiyun.com/weixin_42763792/article/details/100052116

版权

本文深入探讨了事件冒泡的概念及其在父子元素间的传播机制。通过实例代码演示了如何在标准浏览器和IE浏览器中使用e.stopPropagation()和e.cancelBubble=true来有效阻止事件冒泡，确保网页交互的精确控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们要是到什么是事件冒泡

事件冒泡：作为父子时间的元素，当点击子元素时，会冒泡到父元素身上。
阻止事件冒泡的方法：
1.在标准浏览器下：`e.stopPropagation();`
2.在ie浏览器下：`e.cancelBubble = true;`

<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>