点击主div内的按钮时，如何获取该按钮的ID？

你遇到的问题是因为this在事件处理函数里绑定的是添加onclick事件的父元素（也就是id为main的div），不管你点的是它下面的哪个子元素，事件冒泡触发父元素的事件后，this依然指向父元素，自然拿不到子元素的ID。

下面给你两种解决方法：

方法1：用事件对象的target属性拿实际点击元素 #

把事件处理函数改成接收event参数，通过event.target就能获取到真正被点击的子元素，进而拿到它的ID。

修改后的代码：

<div id='main' onclick='handleClick(event)'>
  <p> some paragraph </p>
  ...
  <button id='test' type="button">click</button>
</div>

<script>
function handleClick(event) {
  const clickedEl = event.target;
  console.log('点击元素的ID：', clickedEl.id);
}
</script>

要是点击的元素没有ID（比如例子里的p标签），clickedEl.id会返回空字符串，你可以加个判断过滤这种情况：

function handleClick(event) {
  const clickedEl = event.target;
  if (clickedEl.id) {
    console.log('点击元素的ID：', clickedEl.id);
  } else {
    console.log('这个元素没有设置ID');
  }
}

方法2：区分绑定元素和触发元素（可选） #

如果需要同时用到父元素和子元素，可以用event.currentTarget指代绑定事件的父元素（和原来的this作用一样），event.target指代实际点击的子元素：

function handleClick(event) {
  console.log('绑定事件的父元素：', event.currentTarget); // 等价于原来的this
  console.log('实际点击的子元素：', event.target);
  console.log('子元素ID：', event.target.id);
}

额外提示 #

如果子元素还有嵌套（比如按钮里包了个span），event.target会指向最内层的span，这时候要拿按钮的ID可以用closest方法：

function handleClick(event) {
  const targetBtn = event.target.closest('button');
  if (targetBtn) {
    console.log('按钮ID：', targetBtn.id);
  }
}

这个方法会从点击的元素往上找最近的button元素，不管你点的是按钮本身还是它的子元素，都能拿到按钮的ID。

内容的提问来源于stack exchange，提问作者K.Sopheak