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 元素时，会触发点击事件。如果不阻止事件冒泡，点击事件会从 inner 传播到 outer，导致两个事件都会被触发。
• 使用 event.stopPropagation() 方法可以阻止事件冒泡，因此点击 inner 时只会触发 inner 的事件处理函数，而不会触发 outer 的事件处理函数。