为什么我刚派发事件就立即触发？

Question

我想在单击元素 #b 时执行一些操作，然后在 handleB() 完成

之前分派另一个事件侦听器

当我被点击时 #b #a 上的事件 click 已成功发送并且它也已触发但我不想触发它

这是怎么回事？？

document.getElementById('b').addEventListener('click', handleB)

function handleB() {
  alert('Handle B!');
  document.getElementById('a').addEventListener('click', handleA)
}

<div id="a">
  AAA
  <div id="b">BBB</div>
</div>

Answer 1

发生这种情况是因为#b 事件冒泡到#a，并且您已经在 handleB 中添加了点击事件侦听器。它会随着#b 的事件立即触发。您必须停止事件才能冒泡。下面是工作示例：

document.getElementById('b').addEventListener('click', handleB);

function handleB(event) {
  event.stopPropagation();
  console.log('b clicked');
  document.getElementById('a').addEventListener('click', handleA)
}

function handleA() {
  console.log('a clicked');
}

#a {
  width: 200px;
  height: 200px;
  background-color: red;
}

#b {
  width: 100px;
  height: 100px;
  background-color: green;
}

<div id="a">
  <div id="b"></div>
</div>

为什么我刚派发事件就立即触发？

Why the event trigger immediately when I just dispatch it?

javascript

mouseevent

dom-events