时间戳

首页 > 解决方案 > 单击表格单元格目标子元素

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

问题描述

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

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

更新：如评论中所述，e.target 和 e.currentTarget 之间的差异提供了答案（对于 ActionScript，但这在这里没有区别），但问题不同。

标签： javascripthtmldomonclicklisteneraddeventlistener

解决方案

您需要使用thisor ev.currentTargetthat 始终引用侦听器附加到的 DOM 元素，而不是ev.target将引用触发事件的元素，在这种情况下，是被单击的 DOM 元素：

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

推荐阅读