如何使鼠标事件将 TR 元素注册为目标

Question

我在表格方面遇到了问题。我想要的是将单击事件处理程序附加到表，然后让该事件的目标成为相应的tr元素。我对td元素使用了pointer-events: none，但点击事件的目标是表格本身（加上我的tr:hover样式不再有效）。如果我将tr元素更改为display: block鼠标事件会像我想要的那样工作，但现在td元素没有展开以填充整行......

有没有办法解决这个问题？

编辑：我应该提到我希望有一个CSS解决方案，而不是JavaSctipt。

编辑：我在示例中使用了固定宽度，但在实际使用中，表格会自动调整最小宽度的大小。

例 1例 2

Answer 1

由于您使用的是固定宽度的表，因此您可以将 tr 元素显示为块，并向 td 元素添加width规则。

--更新--

好的，由于您在这里没有使用固定宽度的表，因此更新的截图，将td元素显示为浮动列表项。下面是一个示例。

var table = document.querySelector('table');
table.addEventListener('click', function(e) {
	alert(e.target.tagName)
});

table {
  min-width: 600px;
  background: white;
  border: solid 1px black;
  border-collapse: collapse;
}
tr {
  display: inline-block;
  width: 100%;
}
tr:hover {
  background: red;
}
td {
    box-sizing: border-box;
    display: list-item;
    text-align: center;
    pointer-events: none;
    width: 50%;
    float: left;
    list-style: none;
}

<table>
  <tr>
    <td><strong>Test</strong></td>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>