Question

我有一个简单的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-尽管它没有侦听器。

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

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

Answer 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))

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

1 个答案: