javascript - 如果单击内部 div，如何防止来自外部 div 的单击事件

Question

我有 2 个带有 js 单击事件的 div。一个 div 位于另一个 div 中。

但我不希望在单击内部 div 时触发外部 div 的单击事件。我怎样才能防止这种情况发生？

Answer 1

默认情况下，事件处理从 DOM 的最低级别开始，您已在该级别定义了处理程序来处理目标事件。假设您在父链中更高层定义了事件监听器来处理同一事件，您将需要 stop the propagation of the event如果您不希望事件在您打算处理的层之外处理:

e.stopPropagation();

在下面的示例中查看删除该行时会发生什么:

document.querySelector('.inner').addEventListener('click', function(e) {
  alert('inner div clicked!');
  e.stopPropagation();
});

document.querySelector('.outer').addEventListener('click', function() {
  alert('outer div clicked!');
});

.outer {
  width: 200px;
  height: 200px;
  background: blue;
}

.inner {
  width: 100px;
  height: 100px;
  background: green;
}

<div class='outer'>
  Outer
  <div class='inner'>
    Inner
  </div>
</div>