React父DIV绑定onClick时event.target指向子IMG问题解决

这是DOM事件流的标准行为，和React本身无关：

• 浏览器触发点击事件时，event.target 永远指向鼠标实际点击到的最内层DOM节点
• 你把事件绑定在父DIV上，本质是利用了事件冒泡机制：点击内部的img/文字div时，事件会从最内层的被点击元素逐层向上冒泡，直到触发你绑定在父DIV上的处理函数
• React的合成事件完全遵循原生DOM的事件流规则，所以才会出现点击img时打印出img元素的情况

不需要手动编写向上查找父元素的逻辑，有两种成熟的零冗余方案：

方案1：直接使用event.currentTarget（推荐，无副作用） #

event.currentTarget是原生事件对象自带的属性，它的值永远指向当前绑定了事件处理函数的元素，和你实际点击到哪个子元素没有关系，直接修改处理函数即可：

const handleClick = (event) => {
  // 永远输出绑定onClick的父DIV元素
  console.log(event.currentTarget);
}

这个方案是通用最优解，不会影响内部子元素的正常事件绑定，也不需要额外写DOM遍历逻辑。

方案2：通过CSS禁止子元素响应鼠标事件（适合纯展示场景） #

给菜单项的内部子元素设置pointer-events: none，让子元素完全不接管鼠标事件，此时点击时的event.target会直接是外层父DIV：

/* 给绑定事件的父DIV加类名menu-item后生效 */
.menu-item > * {
  pointer-events: none;
}

这个方案的局限是内部子元素无法再单独绑定点击、hover等鼠标交互，只适合菜单项整体点击、内部元素纯展示的场景。

完全不需要。手动调用closest()、遍历parentNode向上找父元素的方案属于冗余实现，event.currentTarget就是原生标准专门为这个场景设计的属性，直接使用即可。

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