Question

我有一个包含表数据的简单表，想要使表行可点击并在点击时执行某些操作。

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

td {
  pointer-events: none;
}

tr {
  cursor: pointer;
}

当我使用包含跨度的div而不使用tr和td的跨度时，这是可行的，因为表行现在不允许添加任何指针事件，即使我添加了它们。

有人知道解决方法吗？

Answer 1

如在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部分确保，如果您要在其中执行的表位于另一个表中，则单击 this 上的tr中没有的点击表无法处理。）*

更多：

停用表格数据指针事件后，表格row（）无法接收指针事件

1 个答案: