javascript - 单击元素或其子项时如何获取元素的数据属性

Question

我正在制作一张表格。

document.querySelector('table').addEventListener('click', (e) => {
  console.log(e.target);
  console.log(e.target.dataset.item);
})

td {
  padding: 8px;
  border: 1px solid black;
  background-color: blue;
}

span {
  background-color: red;
  padding: 4px;
}

<table>
  <tr>
    <td data-item="item1"><span>1</span></td>
    <td data-item="item2"><span>2</span></td>
    <td data-item="item3"><span>3</span></td>
    <td data-item="item4"><span>4</span></td>
    <td data-item="item5"><span>5</span></td>
  </tr>
</table>

当我点击蓝色部分时，我可以得到data-item属性。但是当我点击红色部分时，我不能。

我想修复它，如果我点击 <span/>在<td/> , 我想得到 data-item来自 <td /> 的属性.

Answer 1

尝试通过您的子标签使用closest 而不是dataset。

document.querySelector('table').addEventListener('click', (e) => {
  console.log(e.target.closest("td").dataset.item);
})

td {
  padding: 8px;
  border: 1px solid black;
  background-color: blue;
}

span {
  background-color: red;
  padding: 4px;
}

<table>
  <tr>
    <td data-item="item1"><span>1</span></td>
    <td data-item="item2"><span>2</span></td>
    <td data-item="item3"><span>3</span></td>
    <td data-item="item4"><span>4</span></td>
    <td data-item="item5"><span>5</span></td>
  </tr>
</table>