表行 (<tr>) 无法接收指针事件，当表数据指针事件被停用时

Question

>我有一个简单的表格，其中包含表格数据，并希望使表格行可单击并在单击时执行某些操作。

没有任何css，元素是事件目标，但我想只使表行成为事件目标，所以我所做的如下：

td {
pointer-events: none;
}
tr {
cursor: pointer;
}

当我使用div 来连接跨度但使用 tr 和 td 时，这很有效，因为即使我添加它们，表行现在也不允许任何指针事件。

有谁知道解决方法？

Answer 1

正如它在MDN上所说的那样

没有

该元素从来都不是鼠标事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能以这些后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段往返后代的途中适当地触发此父元素上的事件侦听器。

因此，不允许pointer-eventstd元素意味着单击td(而不是tr内td周围的边距(将不起作用。

相反，只需将click钩在tr甚至tbody或table上;例如：

document.querySelector("table").addEventListener("click", function(e) {
// Is it a click on a tr in this table?
var tr = e.target.closest("tr");
if (tr && this.contains(tr)) {
// Yes, toggle highlight
tr.classList.toggle("highlight");
}
});

.highlight {
background-color: yellow;
}

<table>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>

*(那里的contains部分确保，如果您要执行此操作的表位于另一个表中，则不会处理此表上不tr的单击。*

更多：

• Element.closest
• Node.contains