Question

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

我有一个包含几个div的菜单，这些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

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

正确。 target是事件的实际目标，无论您挂钩事件的哪个元素，由于冒泡而可能与实际目标不同（在您的情况下，点击从img到{的气泡{1}}）。

您可以通过div获取您挂钩事件的元素（假设您让事件系统设置为this处理程序）或this。

你的小提琴作为改变的片段：

＆＃13;

e.currentTarget

＆＃13;

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);
}

＆＃13;

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

＆＃13;

父目标子上的addEventListener事件

1 个答案: