父目标子上的addEventListener事件

Question

我正在做一个小应用，只是为了学习ES6的东西，我发现了一个关于addEventListener和父/子事件的问题。

我有一个由几个div组成的菜单，其中有一个图像(一个头像)和一些文本。每个div都有一个data-id属性来获取被点击的元素id，我在每一行上都放了一个addEventListener：

<div class="row" data-id="1">
  <img src="avatar" />
  Lorem ipsum
</div>
...

和js：

const rows = document.querySelectorAll('.row');
rows.forEach(row => row.addEventListener('click',selectRow));

function selectRow(e){
  var row = e.target;
  alert(row.dataset.id);
}

当我点击头像时，问题就来了。它会触发click事件，但目标是img元素，而不是div，所以我无法获取data-id属性。

我尝试了很多方法(如this one)，但它阻止了在单击头像时触发事件，所以不是解决方案，因为头像是行的一部分，可能会被单击:S

我设置了一个jsfiddle来显示我的问题。如有任何帮助，我们将不胜感激:)

https://jsfiddle.net/igorosabel/o64b404y/1/

Answer 1

单击它会触发

事件，但目标是img元素，而不是div，所以我无法获取data-id属性。

对，是这样。target是事件的实际目标，无论您将事件挂接到哪个元素上，这可能会因为冒泡而与实际目标不同(在本例中，从img到div单击气泡)。

您可以通过this (假设您让事件系统为处理程序设置this )或e.currentTarget来获取挂接事件的元素。

你的小提琴就像是这个变化的一个片段：

​

const rows = document.querySelectorAll('.row');
rows.forEach(row => row.addEventListener('click',showId));

function showId(e){
  console.log("Using this:", this.dataset.id);
  console.log("Using e.currentTarget:", e.currentTarget.dataset.id);
}

.row{
  border: 1px solid #000;
  margin-bottom: 10px;
  padding: 10px;
}

<div class="row" data-id="1">
  <img src="https://placehold.it/100x100" />
  Lorem ipsum
</div>
<div class="row" data-id="2">
  <img src="https://placehold.it/100x100" />
  Lorem ipsum
</div>
<div class="row" data-id="3">
  <img src="https://placehold.it/100x100" />
  Lorem ipsum
</div>

​