当点击嵌套结构中的子元素触发父元素绑定的 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>或<div classname="contextLabel">）；<li> <code>event.currentTarget：当前事件监听器注册所在的元素（即你写onClick={onMenuItemClick}的那个父<div>）。<p>在你的 JSX 中：</p> <pre class="brush:php;toolbar:false;"><div onclick="{onMenuItemClick}" data-id="show"> <div classname="{styles['contextIconBox']}"> @@##@@ </div> <div classname="{styles['contextLabel']}">myarea</div> </div></pre> <p>当用户点击 <code><img src="%7Bbtn_delete%7D" classname="{styles['contextIcon']}">时，event.target是<img>标签——它没有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" };</htmldivelement>⚠️ 注意事项：
- 不要依赖
event.target.parentElement.getAttribute('data-id')等路径式查找——DOM 结构变动时易出错，且语义不清； - 若需 TypeScript 类型安全，建议显式标注事件参数类型（如
React.MouseEvent<htmldivelement></htmldivelement>），避免any风险； -
currentTarget在事件冒泡阶段始终稳定指向绑定监听器的元素，是事件委托场景下的标准实践。
? 扩展提示：若需同时识别具体点击了哪个子区域（例如区分图标区和文字区），可在子元素上添加
data-action等标识，并结合event.target进行精细化判断；但获取父级上下文属性（如data-id）时，请无条件优先使用currentTarget。 - 不要依赖
