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

我正在做一张桌子

document.querySelector（'table'）。addEventListener（'click'，（e）=>{
console.log（如target）；
console.log（e.target.dataset.item）；
})

td{
填充：8px；
边框：1px纯黑；
背景颜色：蓝色；
}
跨度{
背景色：红色；
填充：4px；
}

1.
2.
3.
4.
5.

检查单击元素的名称是否为

span

使用属性选择其父元素

document.querySelector（'table'）。addEventListener（'click'，（e）=>{
var ele=e.target.nodeName==“SPAN”？e.target.parentNode:e.target；
日志（ele.dataset.item）；
})

td{
填充：8px；
边框：1px纯黑；
背景颜色：蓝色；
}
跨度{
背景色：红色；
填充：4px；
}

1.
2.
3.
4.
5.

尝试通过您的子标记使用

最近的

，而不是

数据集

document.querySelector（'table'）。addEventListener（'click'，（e）=>{
console.log（例如target.closest（“td”）.dataset.item）；
})

td{
填充：8px；
边框：1px纯黑；
背景颜色：蓝色；
}
跨度{
背景色：红色；
填充：4px；
}

1.
2.
3.
4.
5.

你为什么先听整张桌子

仅收听“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);
    }      
  });
}

---

您可以检查单击项的数据集中的键，如果它确实有一些属性，则使用

e.target

，否则向上移动一级

e.target.parentNode

：

document.querySelector（'table'）。addEventListener（'click'，（e）=>{
var el=Object.keys（e.target.dataset）.length？
e、 目标：e.target.parentNode；
console.log（el.dataset.item）；
})

td{
填充：8px；
边框：1px纯黑；
背景颜色：蓝色；
}
跨度{
背景色：红色；
填充：4px；
}

1.
2.
3.
4.
5.

您可以使用

e.target.closest（“[data item]”）。dataset.item

，如果。谢谢您的回答：）谢谢您的回答：）这是我找到的完美答案。因为在我的表中，

是动态呈现的

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