Question

我希望能够单击div“三”，它应该冒出气泡到其他两个？

const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', function (e) {
  console.log(e.target.className);
}));

<div class="one">
  <div class="two">
    <div class="three">
        Hello World
    </div>
  </div>
</div>

Answer 1

它确实冒了气泡，您应该会收到3条日志消息。

由于three是事件冒泡的原始元素，因此每次都会记录e.target。要获取传播中的当前元素，请使用e.currentTarget。该代码记录three, two, one。

请参见What is the exact difference between currentTarget property and target property in javascript

const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', function (e) {
  console.log(e.currentTarget.className);
}));

<div class="one">
  <div class="two">
    <div class="three">
        Hello World
    </div>
  </div>
</div>

为什么这段代码中的js事件没有冒泡？

1 个答案: