js实现点击冒泡

事件冒泡机制

事件冒泡是DOM事件传播的机制之一，当元素触发事件时，事件会从触发元素开始，逐级向上层父元素传播，直到document对象。例如，点击子元素时，父元素上的同类事件也会被触发。

阻止事件冒泡的方法

在JavaScript中，可通过stopPropagation()方法阻止事件继续向上冒泡：

element.addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件冒泡
  // 其他逻辑
});

实际应用示例

假设HTML结构如下：

<div id="parent">
  <button id="child">点击</button>
</div>

允许冒泡的情况（默认行为）：

document.getElementById('parent').addEventListener('click', () => {
  console.log('父元素被触发');
});

document.getElementById('child').addEventListener('click', () => {
  console.log('子元素被触发');
});
// 点击按钮会依次输出：子元素被触发 → 父元素被触发

阻止冒泡的情况：

document.getElementById('child').addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('子元素被触发，但阻止冒泡');
});
// 点击按钮仅输出：子元素被触发，但阻止冒泡

事件捕获与冒泡的关系

事件传播分为捕获阶段（从上到下）和冒泡阶段（从下到上）。若需要在捕获阶段拦截事件，可设置addEventListener的第三个参数为true：

element.addEventListener('click', handler, true);

注意事项

• 阻止冒泡可能影响依赖事件冒泡的全局监听逻辑。
• 某些事件（如focus）默认不冒泡，需使用捕获阶段或替代方案。
• 结合event.preventDefault()可同时阻止默认行为和冒泡。