单击表格单元格目标子元素答案

【问题标题】：Click on table cell targets child element单击表格单元格目标子元素
【发布时间】：2019-03-03 13:23:48
【问题描述】：

我有一个简单的 HTML 表格，其中一些单元格中有 id：

<td id="x-11"><b>Is it a cell?</b> What a cell!</td>

现在我想将 ID 传递给触发 onclick 的 JavaScript 函数：

const $tds = document.querySelectorAll('td[id]')
    for (let i = 0; i < $tds.length; i++)
        $tds[i].addEventListener('click', ev => console.log(ev.target.id))

如果我单击单元格内的空白区域或普通文本，它会按预期工作。但是，如果我点击 <b> 元素内的文本，就会发生奇怪的事情：浏览器说 <b> 元素是 ev.target - 尽管它没有任何监听器。

有人可以解释这种行为或提供解决方案吗？

更新：正如 cmets 中所述，Difference between e.target and e.currentTarget 提供了答案（对于 ActionScript，但在这里没有区别），但问题不同。

【问题讨论】：

event 对象始终以引起事件的元素为目标，无论该元素是否具有事件监听器。在您的情况下，<b> 位于具有事件侦听器的元素内部，因此它变为 event.target。
Difference between e.target and e.currentTarget的可能重复
将目标更改为 currentTarget
谢谢你，你是对的。奇怪的是，Web Inspector 在我的浏览器中将currentTarget 显示为null，但它仍然可以工作。而target/currentTarget 的命名表明它恰恰相反......

标签： javascript html dom onclicklistener addeventlistener

【解决方案1】：

您需要使用 this 或 ev.currentTarget 始终引用侦听器附加到的 DOM 元素，而不是 ev.target 将引用触发事件的元素，在本例中为 DOM 元素被点击：

$tds[i].addEventListener('click', function(){
   console.log(this.id)
});
//Or
$tds[i].addEventListener('click', ev => console.log(ev.currentTarget.id))

【讨论】：

我喜欢this 的解决方案，但它不适用于箭头函数。这是function(ev) {console.log(this.id)}。