React点击子元素e.target变化，如何始终识别为父div点击？

问题复现 #

你编写的FAQ折叠项头部组件结构如下：

<div onClick={toggleHiden} className="faq-item-header">
 <h3>What is Bookmark?</h3>
 <img src={iconArrow} alt="arrow" />
</div>

组件效果参考：

原有事件处理逻辑预期点击div时切换后续内容的hidden类实现显隐：

const toggleHiden = (e) => {
    console.log(e.target);
    e.target.nextSibling.firstChild.classList.toggle("hidden");
};

实际测试时点击div内部的h3、img子元素，e.target会指向被点击的子元素而非绑定事件的外层div，导致DOM路径匹配错误、逻辑失效。尝试给h3加e.stopPropagation()阻止冒泡后，h3区域完全无法触发点击响应。

问题核心原因 #

这是DOM事件冒泡机制的标准表现：

• e.target 永远指向用户实际点击的最内层DOM节点
• 给子元素调用stopPropagation()会直接阻断事件向上传递，外层div绑定的onClick事件根本接收不到触发信号，自然会出现点击无响应的问题。

可用解决方案 #

方案1：替换为e.currentTarget（最优解，无侵入） #

React合成事件的e.currentTarget属性永远指向当前绑定了事件处理函数的DOM元素，和点击位置是否在子元素上完全无关，不需要修改任何JSX结构、不需要加额外事件处理，只需要修改一行逻辑：

const toggleHiden = (e) => {
    // 仅把e.target替换为e.currentTarget即可
    e.currentTarget.nextSibling.firstChild.classList.toggle("hidden");
};

修改后点击div内任意区域（h3、img、div空白处）都能正常执行切换逻辑。

方案2：CSS透传子元素点击事件（适配特殊场景） #

如果有特殊场景必须使用e.target，可以给内部子元素加CSS属性，让子元素不响应鼠标事件，点击事件会自动落到外层父元素上：

.faq-item-header h3,
.faq-item-header img {
  pointer-events: none;
}

该方案的局限是内部子元素无法再单独绑定任何鼠标交互事件，仅适合内部元素纯展示的场景。

方案3：React范式优化写法（长期维护推荐） #

手动操作原生DOM的classList很容易因为DOM结构调整出现路径匹配错误，这类显隐状态推荐使用React内置的state管理，完全不需要依赖DOM层级关系：

import { useState } from 'react';

function FaqItem() {
  // 用state控制内容显隐状态
  const [contentHidden, setContentHidden] = useState(true);
  const toggleHidden = () => setContentHidden(prev => !prev);

  return (
    <>
      <div onClick={toggleHidden} className="faq-item-header">
        <h3>What is Bookmark?</h3>
        <img src={iconArrow} alt="arrow" />
      </div>
      {/* 直接通过state绑定类名，不需要手动操作DOM */}
      <div className={`faq-content ${contentHidden ? 'hidden' : ''}`}>
        Bookmark is a lightweight browser extension that helps you save, organize and sync your favorite web pages across devices.
      </div>
    </>
  )
}

这种写法后续调整组件DOM结构时，不需要同步修改DOM查找逻辑，维护成本更低。

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