JavaScript 阻止事件冒泡：event.stopPropagation() 方法详解

在 JavaScript 中，我们可以使用 event.stopPropagation() 方法来阻止事件冒泡。该方法需要在事件处理程序中调用，可以阻止事件从子元素向父元素冒泡。

例如，下面的代码阻止了点击子元素时，事件向父元素冒泡：

// HTML 代码
<div id='parent'>
  <div id='child'>
    Click me!
  </div>
</div>

// JavaScript 代码
const child = document.querySelector('#child');
const parent = document.querySelector('#parent');

child.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Child clicked!');
});

parent.addEventListener('click', function(event) {
  console.log('Parent clicked!');
});

当点击子元素时，只有子元素的事件处理程序被触发，父元素的事件处理程序不会被触发。