Question

在以下代码中，当我单击任何元素时，每次单击仅触发一个事件（记录在控制台中）。从我所读的内容中，我认为我应该看到由于事件传播和冒泡而导致鼠标单击发生的每个元素的控制台日志。不过，似乎我只为最深层嵌套的元素获取了一个事件。

例如，在单击按钮时，如何确定单击的按钮的ID是多少，因为事件目标始终是子图像。我是否只需要了解HTML结构并询问e.target.parentNode，还是有一种更优雅的方式来访问事件传播树中的中间节点？

document.getElementById('parent')
.addEventListener('click', function(e) {
  console.log(e.target.nodeName + ' ' + e.target.id);
});

#parent {
  border: thin black solid;
  width: 200px;
  height: 200px;
}

#child1, #child2 {
  border: thin green solid;
  width: 100px;
  height: 100px;
}

#btn1, #btn2 {
  border: thin red solid;
  width: 50px;
  height: 50px;
}

#image1, #image2 {
  width: 100%;  
  height: 100%;
}

<div id="parent">
  <div id="child1">
    <button id="btn1">
      <img id="image1" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </button>
  </div>
  <div id="child2">
    <button id="btn2">
      <img id="image2" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </button>
  </div>  
</div>

具有多个嵌套子级的点击事件传播

0 个答案: