如何通过JavaScript点击元素获取其data-id属性值

你的代码存在几个关键问题，导致无法正常获取data-id：

1. 全局作用域下的const demo = e.target.closest(".demo");会直接报错——e只在事件处理函数内部有效，这里的e未定义；同时第一行绑定的handle函数也没实现，这两个错误会中断后续代码执行。
2. 即使代码执行到点击事件绑定，用e.target.dataset.id也会出现问题：当你点击.item内部的<span>时，e.target指向的是span元素，而span没有data-id属性，此时会输出undefined。

方案一：事件委托（推荐） #

利用事件冒泡，把点击事件绑定到父元素.demo上，这样不管.item是静态还是动态生成的，都能捕获点击，还能减少事件绑定数量。

<ul class="demo">
  <li class="item" data-id="11111">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="22222">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="333">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
</ul>

<style>
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo {
  display: inline-block;
  border: 1px solid #222;
}

.item {
  border: 1px solid #222;
  padding: 30px;
}

.item:hover {
  background-color: yellow;
}
</style>

<script>
// 绑定到父元素demo
document.querySelector('.demo').addEventListener('click', function(e) {
  // 找到点击的元素中最近的.item
  const targetItem = e.target.closest('.item');
  if (targetItem) {
    // 获取data-id并输出
    console.log(targetItem.dataset.id);
  }
});
</script>

方案二：直接绑定到.item元素 #

如果确定.item都是静态存在的，也可以直接给每个.item绑定事件，但要修正获取data-id的方式：用this.dataset.id或者e.currentTarget.dataset.id，因为这两个指向的是绑定事件的.item元素，不受子元素点击影响。

const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', function(e) {
    // 方式1：用this
    console.log(this.dataset.id);
    // 方式2：用currentTarget
    // console.log(e.currentTarget.dataset.id);
  });
});

关键说明 #

• e.currentTarget始终指向绑定事件的元素，而e.target是实际被点击的元素，这是两者的核心区别。
• 事件委托更适合动态元素场景，比如后续通过JS新增的.item，不需要重新绑定事件。

内容的提问来源于stack exchange，提问作者AWEI