单击表单元格目标子元素

Question

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

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

现在，我想将ID传递给单击触发的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 --尽管它没有任何侦听器。

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

更新：如注释中所述，Difference between e.target and e.currentTarget提供了答案(对于ActionScript，但在这里没有区别)，但问题是不同的。

Answer 1

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

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