我有一个包含表数据的简单表,想要使表行可点击并在单击时执行某些操作。
没有任何CSS,这些元素就是事件目标,但是我只想使表行成为事件目标,所以我做了以下工作:
td {
pointer-events: none;
}
tr {
cursor: pointer;
}
当我使用包含跨度的div而不是tr和td的div时,这行得通,因为表行现在不允许任何指针事件,即使我添加它们也是如此。
有谁知道解决方法?
最佳答案
就像在MDN上说的
没有
元素永远不是鼠标事件的目标;但是,如果鼠标后代的指针事件设置为其他值,则鼠标事件可能以其后代元素为目标。在这些情况下,鼠标事件将在事件捕获/冒泡阶段期间按适当的方式在此父元素上触发事件侦听器,以使其进入/流出后代。
因此,禁止在pointer-events
元素上使用td
意味着单击td
(而不是td
内tr
的空白)。
相反,只需将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
关于javascript - 禁用表数据指针事件后,表行(<tr>)无法接收指针事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52839860/