应优先使用 e.nativeEvent.target（React）或 event.target 配合 .stop/ref（Vue）获取真实 DOM 元素，避免混淆 target 与 currentTarget，以此实现原生与框架事件的安全对接。
直接用 target 做原生与 React/Vue 合成事件的对接，本质是绕过框架封装、回归 DOM 本源——但不能硬来，得找准“接口缝合点”。关键不是替换事件系统，而是让原生操作能被框架感知，或让框架事件能反向驱动原生逻辑。
React 中通过 nativeEvent 访问真实 target
React 的合成事件对象（SyntheticEvent）本身不暴露原始 DOM 元素的 target，但可通过 e.nativeEvent.target 拿到。这是最安全、最推荐的“向下穿透”方式：
-
必须用
e.nativeEvent.target，而非e.target（后者是 React 封装后的“合成 target”，可能指向父组件或已被重映射） - 适用于需要精确操作 DOM 节点的场景：比如手动聚焦、获取 input 值、读取 data-* 属性、调用原生方法（
scrollIntoView） - 注意：
e.nativeEvent是标准浏览器 Event 对象，所有原生 API 都可用，无需兼容处理
Vue 中用 event.target 需配合 stopPropagation 或 ref
Vue 的事件对象默认就是原生 Event（除非显式使用 .native 修饰符），所以 event.target 天然可用。但要注意冒泡干扰：
react-best-practices
下载
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
- 如果在自定义组件上监听原生事件（如
@click），event.target可能是子元素，不是组件根节点——这时建议用ref显式绑定根元素，再用this.$refs.xxx安全访问 - 若需阻止事件继续冒泡到父级 Vue 组件（避免触发其他
@click），加.stop修饰符：@click.stop="handler" - 在 Composition API 中，
event.target仍可直接用，但推荐结合defineExpose暴露方法，让父级通过实例调用，而非依赖 DOM 查找
跨框架混用时用 target 做通信桥接
当 React 组件内嵌原生 HTML（如第三方地图 SDK、Canvas 渲染区）或与 Vue 子应用共存时，target 是最轻量的通信信标：
立即学习“前端免费学习笔记（深入）”；
- 在原生区域触发事件后，用
event.target.dataset.id或event.target.classList标识来源，再通过props回传给 React/Vue 父组件 - React 中可监听 document 级原生事件（如
document.addEventListener('click', handler)），在 handler 里判断event.target.matches('.external-trigger')，再调用setState或useCallback更新状态 - Vue 中类似，用
onMounted绑定 document 事件，用event.target.closest('[data-vue-bridge]')定位并触发对应逻辑
避免踩坑：target 不等于 currentTarget
无论 React 还是 Vue，都容易混淆这两个属性：
-
event.target是实际触发事件的最深节点（比如你点的是按钮里的 icon） -
event.currentTarget是当前绑定事件监听器的元素（比如 button 根节点） - 在事件委托、动态渲染列表、Shadow DOM 场景中，二者差异明显；优先用
currentTarget获取绑定上下文，用target获取交互焦点 - React 合成事件中
e.target行为已模拟为currentTarget（即“合成 target”），所以更需依赖e.nativeEvent.target获取真实目标
