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

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 条日志消息。

它每次记录三个，因为e.target是事件冒泡的原始元素。要获取传播中的当前元素，请使用e.currentTarget。此代码记录三、二、一。

参见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>