data-track属性需写全三类才不漏埋点：必填data-track（如"checkout_submit"），选填data-event-id（唯一标识）和data-track-params（json字符串），配合closest('[data-track]')获取、pointerdown监听及sendbeacon上报。
data-track 属性怎么写才不会漏埋点
直接给按钮加 onclick 或用 querySelectorAll('button') 绑定事件，短期能跑通，但动态插入、组件复用、权限隐藏后 DOM 结构一变，就大量漏报。用 data-track 是把“这个元素要埋点”这个意图直接写进 HTML，和 JS 逻辑解耦，也方便 QA 在 DevTools 里一眼核对。
必须写全三类属性才能支撑真实业务：
-
data-track：必填，值是事件类型名，比如"checkout_submit"、"video_play"，别用模糊词如"click" -
data-event-id：选填，用于区分同类型多个实例，比如商品列表里每个“加入购物车”按钮，值设为"p10023"这样的唯一 ID -
data-track-params：选填，存 JSON 字符串（需提前JSON.stringify()），比如{"tab": "recommend", "user_level": "vip"}，避免在 JS 里拼参数出错
常见错误是只写 data-track，结果上报时缺上下文，分析时根本分不清点击来自哪个模块。
event.target.closest('[data-track]') 为什么不能换成 getAttribute
按钮内部常嵌套 <i></i>、<span></span>、图片等子元素，用户点图标时 event.target 是那个 <i></i>，它没有 data-track 属性——如果用 event.target.getAttribute('data-track') 或 event.target.dataset.track，90% 的点击都取不到值。
closest() 是向上查找最近的带该属性的祖先，兼容所有嵌套结构。但要注意：
- 必须用
closest('[data-track]')，不是parentNode或parentElement，后者可能跳过中间某层 - 如果目标元素自己带
data-track，closest也能取到；如果只在父级<button></button>上，照样生效 - 别漏判空值：
if (!el) return，否则后续读dataset会报错
移动端 click 事件为什么经常不触发
iOS 和多数安卓 WebView 对 click 有 300ms 延迟，部分旧版 WebView 根本不触发。用 touchstart 虽然能响应快，但滚动时容易误触；pointerdown 是当前最优解——主流浏览器（Chrome、Safari、Edge）均已支持，且无延迟、不误触。
稳妥做法是监听双事件，优先用 pointerdown，降级 fallback 到 click：
document.addEventListener('pointerdown', handleTrack);
document.addEventListener('click', handleTrack);
注意：不要同时监听 pointerdown 和 touchstart，iOS Safari 会触发两次；也不要只监听 touchstart 后再手动 preventDefault()，这会破坏原生滚动。
sendBeacon 上报失败的三个硬限制
用户点完按钮立刻跳转或关页，常规 fetch 或 XMLHttpRequest 几乎必然被终止。用 navigator.sendBeacon() 可靠得多，但它有明确约束：
- 只支持
POST方法，不支持GET - body 必须是
ArrayBuffer、Blob、FormData或URLSearchParams，不能直接传 plain object 或 JSON 字符串 - 上报数据量上限约 64KB，超限会被静默截断（Chrome 当前行为）
正确写法示例：
const payload = new URLSearchParams();
payload.append('event', el.dataset.track);
payload.append('id', el.dataset.eventId || '');
navigator.sendBeacon('/log', payload);
别用 JSON.stringify(obj) 直接塞进去——那会报错，也别试图用 new Blob([JSON.stringify(obj)])，虽合法但服务端解析成本高，优先走 URLSearchParams。
真正容易被忽略的是：上报字段命名必须统一，比如所有页面都用 url 字段传当前地址，而不是有的写 page_url、有的写 location——字段不一致，后续查漏斗、做归因时根本对不上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
