Question

我有一个div元素，里面有一个input元素。我想在点击div时注册一个事件监听器。它工作正常，但问题是：input上的“点击”也被检测到，我不想。

document.getElementById("foo").addEventListener('click', function(event) {
  alert();
  event.stopPropagation();
})

div {
  width: 300px;
  height: 300px;
  background-color: red;
}

<div id="foo">
<input>
</div>

Answer 1

您在错误的事件中使用event.stopPropagation();，这就是它无效的原因。 stopPropagation可防止事件冒泡，因此您需要在子事件中使用它。

试试这个。

＆＃13;

document.getElementById("foo").addEventListener('click', function(event) {
  if(event.target === event.currentTarget) {
    alert();
  }
})

＆＃13;

div {
  width: 300px;
  height: 300px;
  background-color: red;
}

＆＃13;

<div id="foo">
  <input>
</div>

＆＃13;

Answer 2

stopPropagation可防止事件冒泡。阅读有关事件冒泡here的更多信息。因此，您需要将stopPropagation放在按钮上

＆＃13;

document.getElementById("bar")
    .addEventListener('click', function(event) {
        event.stopPropagation();
    })

document.getElementById("foo")
    .addEventListener('click', function(event) {
        alert();
    })

＆＃13;

div {
  width: 300px;
  height: 300px;
  background-color: red;
}

＆＃13;

<div id="foo">
    <input id="bar">
</div>

＆＃13;

现在，您可以观察到单击input时未触发警报。

“div”中的“输入”：如何为“div”注册“onclick”事件监听器，但不为“输入”注册

2 个答案: