可通过事件代理在不改业务代码前提下实现全局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') 判断）