可通过事件代理在不改业务代码前提下实现全局DOM交互自动捕获与上报，核心是监听document原生事件、动态提取目标上下文、优先读取data-track-id等语义化属性，并辅以区域标记、模块信息补全、表单采集及误报过滤等策略。
可以在不改动业务代码的前提下，通过事件代理（Event Delegation）机制捕获全局 DOM 交互。核心思路是监听 document 或 body 层级的原生事件（如 click、touchstart、input），利用事件冒泡特性，在触发时动态提取目标元素的上下文信息，完成自动识别与上报。
基于事件代理的轻量级监听
这是最常用且兼容性最好的方式。只需在页面初始化时绑定一次监听器，无需修改任何按钮、链接或表单代码。
- 监听 document 上的
click、touchstart、submit等事件，覆盖主流交互场景 - 通过
e.target获取真实触发元素，再向上查找最近的可交互节点（如 button、a、input[type="button"] 等） - 优先读取元素上预设的语义化属性，例如
data-track-id、data-event-name，作为事件标识 - 若无自定义属性，则按规则生成默认标识，比如
button#submit-btn或a[href="/order"]
增强识别能力：补充上下文与语义
仅靠标签名和 ID 容易重名或缺乏业务含义，需在不侵入业务逻辑的前提下注入轻量上下文。
- 在页面加载时扫描关键区域（如 header、main、aside），为它们打上
data-track-area="header"类似标记，后续点击可自动携带区域维度 - 利用
Element.closest()向上查找 nearest 包裹容器，提取其data-module或data-section属性，补全业务模块信息 - 对表单类操作，自动采集
form[name]和提交按钮的name/value，用于区分“注册提交”还是“登录提交”
规避误报与性能损耗的关键控制
全自动监听容易捕获冗余事件（如文字选中、背景点击），需加入合理过滤与节流策略。
- 排除非交互元素：跳过
script、style、meta、文本节点及 disabled 状态元素 - 限制上报频率：对高频操作（如连续点击、快速滑动）做 100ms 去抖，避免刷数据
- 设置白名单标签与属性组合，例如只上报带有
href的 a 标签、type="submit"的 button，或显式声明data-track的任意元素 - 禁用 iframe 内容、跨域子窗口的事件捕获，防止安全报错或无效日志
Vue/React 场景下的零侵入适配
现代框架中 DOM 可能动态生成，需确保监听器始终有效，同时不破坏响应式逻辑。
- 在应用启动入口（如 main.ts 或 index.js）中尽早挂载监听器，早于框架 mount 阶段
- 对 Vue，可封装为插件，在
app.config.globalProperties注入统一 track 方法，但监听本身仍走原生事件代理，不依赖指令 - 对 React，避免在组件内重复绑定；推荐使用
useEffect(() => { ... }, [])在根组件挂载时一次性注册，配合 cleanup 清理 - 若使用 SSR，确保监听器只在客户端执行（加
if (typeof window !== 'undefined')判断）
