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

Question

我正在做一个Table.

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>

当我点击BLUE PART时，我可以获得data-item属性。但是当我点击 RED PART 时，我不能。

我想修复它，如果我在 <td/> 中单击 <span/>，我想从 <td /> 中获取 data-item 属性。

Answer 1

使用 parentNode 属性

检查被点击元素的名称是否为 span select 父元素

document.querySelector('table').addEventListener('click', (e) => {
  var ele = e.target.nodeName == "SPAN" ? e.target.parentNode : e.target;
  console.log(ele.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>

Answer 2

尝试在您的子标签中使用 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>

Answer 3

你为什么先听整体table？

仅监听 "td" 个元素：

let cells = document.getElementsByTagName('td');
for (var i=0; i < cells.length; i++) {
  let cell = cells[i];
  cell.addEventListener('click', (e) => {
    let element = e.target.nodeName;
    if (element === 'TD') {
      console.log(e.target.dataset.item);
    } else if (element === 'SPAN') {
      console.log(e.target.parentNode.dataset.item);
    }      
  });
}

我认为在 table 上设置侦听器并不重要，因为在您的情况下，它不会触发 table 上的事件。

一些样式可以更好地检查：

table {
  background-color: orange;
  border-spacing: 10px;
}

https://jsfiddle.net/aleks351/p0b46wqs/6/

Answer 4

您可以检查所单击项目的数据集中的键，如果它确实具有某些属性，则使用 e.target 否则向上移动一级 e.target.parentNode：

document.querySelector('table').addEventListener('click', (e) => {
  var el = Object.keys(e.target.dataset).length ? 
           e.target: e.target.parentNode;
  console.log(el.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>

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

How to get data attribute of element when click on it or it child

html

javascript

onclick

custom-data-attribute