点击事件问题：点击div内部元素时如何获取该div的ID

开发者阿泽

2026-5-19

解决点击Div内部元素时获取Div ID的问题

这问题我之前踩过坑！核心原因是事件冒泡的时候，event.target会指向实际被点击的子元素，而我们需要的是绑定事件的那个父Div。给你几个靠谱的解决方案：

方法1：使用`event.currentTarget`（最推荐）

currentTarget是事件对象里的一个属性，它永远指向绑定了当前事件处理函数的元素——不管你点击的是Div本身还是它内部的任何子元素，这个值都会是你绑定onclick的那个Div。直接用它拿ID就完事了：

<div id="myTargetDiv" onclick="getDivId(event)">
  <p>我是内部段落</p>
  <button>我是内部按钮</button>
</div>

<script>
function getDivId(event) {
  const targetDivId = event.currentTarget.id;
  console.log("目标Div的ID：", targetDivId); // 始终输出myTargetDiv
}
</script>

方法2：用`closest()`向上查找目标Div

如果你的事件绑定逻辑比较特殊（比如事件委托在更高层级的元素上），可以用event.target.closest()方法，从点击的元素开始向上遍历DOM树，找到最近的符合条件的Div：

<div id="myTargetDiv" onclick="getDivId(event)">
  <div class="inner-box">
    <span>我是嵌套很深的子元素</span>
  </div>
</div>

<script>
function getDivId(event) {
  // 查找最近的id为myTargetDiv的元素
  const targetDiv = event.target.closest('#myTargetDiv');
  if (targetDiv) {
    console.log("目标Div的ID：", targetDiv.id);
  }
}
</script>