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

没有任何CSS,这些元素就是事件目标,但是我只想使表行成为事件目标,所以我做了以下工作:

td {
  pointer-events: none;
}

tr {
  cursor: pointer;
}


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

有谁知道解决方法?

最佳答案

就像在MDN上说的


  没有
  
  元素永远不是鼠标事件的目标;但是,如果鼠标后代的指针事件设置为其他值,则鼠标事件可能以其后代元素为目标。在这些情况下,鼠标事件将在事件捕获/冒泡阶段期间按适当的方式在此父元素上触发事件侦听器,以使其进入/流出后代。


因此,禁止在pointer-events元素上使用td意味着单击td(而不是tdtr的空白)。

相反,只需将click钩在tr或什至tbodytable上;例:



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/

10-12 12:36
查看更多