JavaScript 中 stopPropagation 与 stopImmediatePropagation 的区别

在 JavaScript 事件处理程序中，我们经常需要使用 stopPropagation 和 stopImmediatePropagation 方法来防止事件传播。本文将详细介绍这两个方法的区别和使用方法。

stopPropagation

stopPropagation 方法用于阻止事件在当前元素向父级元素的传递。具体来说，当事件被触发时，会先执行当前元素的事件处理程序，然后再依次向上遍历元素的祖先元素，执行他们的事件处理程序。通过调用 stopPropagation 方法可以阻止事件继续向上冒泡传播，从而避免触发其他元素的事件处理程序。

下面是一个示例：

<div id="outer">
  <div id="inner">
    <button id="btn">Click me</button>
  </div>
</div>

<script>
document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer clicked');
});

document.getElementById('inner').addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('Inner clicked');
});

document.getElementById('btn').addEventListener('click', function() {
  console.log('Button clicked');
});
</script>

当我们点击按钮时，控制台输出的结果是：

Button clicked

可以看到，点击按钮时，只触发了按钮的事件处理程序，没有触发祖先元素的事件处理程序。

stopImmediatePropagation

与 stopPropagation 方法不同，stopImmediatePropagation 方法会阻止事件向当前元素的所有其他事件处理程序传递。也就是说，如果当前元素有多个事件处理程序，调用 stopImmediatePropagation 方法后，除当前事件处理程序外，其他事件处理程序都不会触发。

下面是一个示例：

<div id="outer">
  <div id="inner">
    <button id="btn">Click me</button>
  </div>
</div>

<script>
document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer clicked');
});

document.getElementById('inner').addEventListener('click', function(e) {
  e.stopImmediatePropagation();
  console.log('Inner clicked 1');
});

document.getElementById('inner').addEventListener('click', function() {
  console.log('Inner clicked 2');
});

document.getElementById('btn').addEventListener('click', function() {
  console.log('Button clicked');
});
</script>

当我们点击按钮时，控制台输出的结果是：

Button clicked
Inner clicked 1

可以看到，调用 stopImmediatePropagation 方法后，除了当前元素内的第一个事件处理程序（Inner clicked 1）外，其他事件处理程序都被阻止了。因此，第二个事件处理程序（Inner clicked 2）没有被触发。

注意事项

需要注意的是，调用 stopPropagation 和 stopImmediatePropagation 方法只能阻止事件向祖先元素的传递，无法阻止事件向后代元素的传递。例如：

<div id="outer">
  <div id="inner">
    <button id="btn">Click me</button>
  </div>
</div>

<script>
document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer clicked');
});

document.getElementById('btn').addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('Button clicked');
});

document.getElementById('inner').addEventListener('click', function() {
  console.log('Inner clicked');
});
</script>

当我们点击按钮时，控制台输出的结果是：

Button clicked
Inner clicked

可以看到，调用 stopPropagation 方法虽然阻止了事件在父级元素中向上传递，但是并没有阻止事件继续向下在子级元素中传递。

总结

在 JavaScript 事件处理程序中，stopPropagation 方法用于阻止事件在当前元素向父级元素的传递，stopImmediatePropagation 方法用于阻止事件向当前元素的所有其他事件处理程序传递。需要注意的是，这两个方法只能阻止事件向祖先元素的传递，无法阻止事件向后代元素的传递。