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

Question

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

有什么办法解决这个问题吗？

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

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

Example 1 Example 2

Answer 1

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

--更新--

好的，因为您在这里没有使用固定宽度的表格，所以更新后的片段将 td 元素显示为 float 列表项。 这是一个例子。

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>