Question

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

但是如果我点击内部div，我不希望触发外部div的点击事件。我该如何防止这种情况？

Answer 1

使用event.stopPropagation（）;

喜欢这个

document.getElementById("#seconddiv").addEventListener("click", function($event){
    $event.stopPropagation();
});

Answer 2

使用event.stopPropagation：

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

https://jsfiddle.net/4L87qLte/

Answer 3

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

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>

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

3 个答案: