js 禁止冒泡

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

// HTML 结构
/*
<div id="outer">
    <div id="inner">点击我</div>
</div>
*/

// JavaScript 代码
document.getElementById('inner').addEventListener('click', function(event) {
    // 禁止事件冒泡
    event.stopPropagation();
    console.log('内层元素被点击');
});

document.getElementById('outer').addEventListener('click', function() {
    console.log('外层元素被点击');
});

解释说明：

• 在这个示例中，我们有两个嵌套的 div 元素，分别是 outer 和 inner。
• 当用户点击 inner 元素时，会触发点击事件。默认情况下，点击事件会从 inner 元素冒泡到 outer 元素。
• 通过调用 event.stopPropagation() 方法，我们可以阻止事件冒泡，这样点击 inner 元素时，outer 元素的点击事件不会被触发。
• 如果不调用 event.stopPropagation()，点击 inner 元素后，outer 元素的点击事件也会被触发。

如果你希望在某些情况下允许冒泡，在其他情况下禁止冒泡，可以根据条件来调用 event.stopPropagation()。