stopPropagation()是否从捕获阶段停止执行事件？

stopPropagation() 方法是 JavaScript 事件处理中的一个重要函数，用于阻止事件在 DOM 树中的进一步传播。这个方法并不会阻止同一元素上的其他事件处理程序的执行，只是停止了事件的进一步传播。

基础概念

当一个事件在 DOM 树中触发时，它会经历三个阶段：

1. 捕获阶段：事件从最外层的元素开始，向内传递，直到达到目标元素。
2. 目标阶段：事件到达目标元素。
3. 冒泡阶段：事件从目标元素开始，向外传递，直到最外层元素。

stopPropagation() 方法可以在捕获阶段或冒泡阶段调用，以阻止事件继续传播。

相关优势

• 防止事件冒泡：如果你不希望某个事件影响到其父元素或其他祖先元素，可以使用 stopPropagation()。
• 控制事件流：通过精确控制事件的传播，可以优化性能并减少不必要的处理。

类型

• 捕获阶段：事件从最外层元素向内传递。
• 冒泡阶段：事件从目标元素向外传递。

应用场景

假设你有一个包含多个子元素的父元素，每个元素都有一个点击事件处理程序。如果你希望点击子元素时，只触发子元素的事件处理程序，而不触发父元素的事件处理程序，可以使用 stopPropagation()。

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    console.log('Parent clicked');
  }, true); // 捕获阶段

  document.getElementById('child').addEventListener('click', function(event) {
    console.log('Child clicked');
    event.stopPropagation(); // 阻止事件进一步传播
  });
</script>

在这个例子中，点击按钮时，只会输出 "Child clicked"，而不会输出 "Parent clicked"。

遇到的问题及解决方法

如果你发现 stopPropagation() 没有按预期工作，可能有以下原因：

1. 事件处理程序未正确绑定：确保事件处理程序已正确绑定到目标元素。
2. 多次调用 stopPropagation()：如果在同一个事件处理程序中多次调用 stopPropagation()，它只会生效一次。
3. 事件委托：如果你使用事件委托（即在父元素上绑定事件处理程序），确保在正确的地方调用 stopPropagation()。

示例代码

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    console.log('Parent clicked');
  }, true); // 捕获阶段

  document.getElementById('child').addEventListener('click', function(event) {
    console.log('Child clicked');
    event.stopPropagation(); // 阻止事件进一步传播
  });
</script>

参考链接

• MDN Web Docs: Event.stopPropagation()

通过以上解释和示例代码，你应该能够理解 stopPropagation() 方法在捕获阶段的行为及其应用场景。