js 阻止事件冒泡

// 示例代码：阻止事件冒泡

// HTML 结构
/*
<div id="outer">
    Outer Div
    <div id="inner">
        Inner Div
    </div>
</div>
*/

// JavaScript 代码
document.getElementById('inner').addEventListener('click', function(event) {
    // 阻止事件冒泡
    event.stopPropagation();
    console.log('Inner Div clicked');
});

document.getElementById('outer').addEventListener('click', function() {
    console.log('Outer Div clicked');
});

解释说明：

• 在这个示例中，我们有两个嵌套的 div 元素：一个外部的 outer 和一个内部的 inner。
• 当用户点击 inner 元素时，会触发其上的点击事件，并且通过调用 event.stopPropagation() 方法来阻止事件冒泡到父级元素（即 outer）。
• 如果不调用 event.stopPropagation()，点击 inner 元素时，事件会继续传播到 outer 元素，导致两个 console.log 都会被执行。