当点击嵌套结构中的子元素触发父元素绑定的 onClick 事件时，event.target 指向实际被点击的最内层 DOM 节点（如 img 或 inner div），而 event.currentTarget 始终指向当前事件监听器所绑定的元素（即父 div），因此应使用 currentTarget 获取其 data-id。

当点击嵌套结构中的子元素触发父元素绑定的 onclick 事件时，`event.target` 指向实际被点击的最内层 dom 节点（如 img 或 inner div），而 `event.currenttarget` 始终指向当前事件监听器所绑定的元素（即父 div），因此应使用 `currenttarget` 获取其 `data-id`。

在 React（或原生 JavaScript）中，事件委托是常见模式：我们常将事件处理器绑定在父容器上，以统一处理其内部多个子元素的交互。但初学者容易混淆 event.target 与 event.currentTarget 的行为差异：

• event.target：实际触发事件的元素（可能是子元素，如 <img alt="如何在子元素点击事件中正确获取父元素的 data-id 属性" > 或 <div classname="contextLabel">）；<li> <code>event.currentTarget：当前事件监听器注册所在的元素（即你写 onClick={onMenuItemClick} 的那个父 <div>）。<p>在你的 JSX 中：</p><pre class="brush:php;toolbar:false;">&lt;div onClick={onMenuItemClick} data-id=&quot;show&quot;&gt; &lt;div className={styles['contextIconBox']}&gt; &lt;img src={btn_delete} className={styles['contextIcon']} / alt=&quot;如何在子元素点击事件中正确获取父元素的 data-id 属性&quot; &gt; &lt;/div&gt; &lt;div className={styles['contextLabel']}&gt;myarea&lt;/div&gt; &lt;/div&gt;</pre><p>当用户点击 <code><img alt="如何在子元素点击事件中正确获取父元素的 data-id 属性" > 时，event.target 是 <img alt="如何在子元素点击事件中正确获取父元素的 data-id 属性" > 标签——它没有 data-id 属性，因此 event.target.getAttribute('data-id') 返回 null；而 event.currentTarget 始终是外层 <div>，它拥有 <code>data-id="show"，调用 event.currentTarget.getAttribute('data-id') 即可正确获取。

  ✅ 正确写法：

  

  jQuery点击事件遮罩弹出层可移动特效代码

  "jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。

  下载

  const onMenuItemClick = (event: React.MouseEvent<HTMLDivElement>) => {
    const id = event.currentTarget.getAttribute('data-id');
    console.log("onMenuItemClick data-id:", id); // 输出: "show"
  };

  ⚠️ 注意事项：

  • 不要依赖 event.target.parentElement.getAttribute('data-id') 等路径式查找——DOM 结构变动时易出错，且语义不清；
  • 若需 TypeScript 类型安全，建议显式标注事件参数类型（如 React.MouseEvent<htmldivelement></htmldivelement>），避免 any 风险；
  • currentTarget 在事件冒泡阶段始终稳定指向绑定监听器的元素，是事件委托场景下的标准实践。

  ? 扩展提示：若需同时识别具体点击了哪个子区域（例如区分图标区和文字区），可在子元素上添加 data-action 等标识，并结合 event.target 进行精细化判断；但获取父级上下文属性（如 data-id）时，请无条件优先使用 currentTarget。