data-*属性本身不记录点击，必须配合JavaScript监听（推荐pointerdown）、closest('[data-track]')查找、sendBeacon保障送达三环才有效。
data-* 属性本身不记录任何点击，它只是个“贴标签”的容器；真要记录，必须配 JavaScript 监听 + 上报逻辑，否则所有 data-track、data-event-id 都是静默的。
data-track 必须写在可点击容器最外层
按钮内部常嵌套 <i></i>、<span></span> 或图片，用户点图标时 e.target 是那个子元素，它大概率没有 data-track。如果只检查 e.target.hasAttribute('data-track')，90% 的点击会漏掉。
- 正确做法：把
data-track="submit_form"放在<button></button>或包裹它的<div> 上，确保它是可点击区域的最外层容器<li>图标类子元素建议加 <code>style="pointer-events: none"，避免干扰事件捕获 - 别用
parentNode向上找——可能跳过带属性的父级；必须用e.target.closest('[data-track]') - 调用前务必判空：
if (!el) return，否则读el.dataset.track会报错 - ✅ 正确：
data-track="buy_click"、data-event-id="p10023"、data-track-params='{"tab": "home"}' - ❌ 错误：
data-EventId="p10023"（大写 E）、data-track_id="p10023"（下划线）、data-track-id-2="v2"（数字开头，部分 Safari 解析异常） -
dataset会自动把短横线转驼峰：data-track-id→el.dataset.trackId，但前提是原始属性名合法 -
data-=""是无效的，不会进入dataset，也不触发任何行为 - 优先监听
pointerdown：Chrome/Firefox/Safari/主流 WebView 均支持，响应及时，无延迟，且兼容鼠标和触控 - 降级 fallback 到
click：给不支持pointerdown的老环境兜底 - 别在每个按钮上写
onclick="track(...)"—— 无法统一防重复、加用户 ID、补上下文，后期改起来全是硬编码 - 动态插入的按钮（如列表渲染、权限控制显隐）必须靠事件委托，否则新节点永远不触发
- 防重复点击：用
el.dataset.sent = 'true'标记已上报，或加节流（如最小间隔 500ms），避免连点发多条 - 保障送达：关键操作（如下单、登录）用
navigator.sendBeacon()，页面卸载时仍能发出请求；普通曝光可用fetch(..., { keepalive: true }) - 上下文完整性：只写
data-track不够，至少补data-event-id（区分同类按钮）和data-track-params（JSON 字符串，存 tab、用户等级等非 DOM 信息） - 别手动拼 URL 或时间戳——用
location.href和Date.now()，避免服务端解析失败
dataset 读取对大小写和命名极其敏感
浏览器解析 data- 属性时强制转小写，且只认短横线分隔的合法命名。写错就等于没写。
监听事件不能只绑 click
移动端 WebView 对 click 支持不稳定：iOS 可能延迟 300ms，部分安卓机根本不出发；touchstart 又容易误触（滚动时触发）。真实项目必须用更可靠的方案。
立即学习“前端免费学习笔记（深入）”；
上报前必须处理三个实际问题
埋点数据发不出去，比没埋还糟——你根本不知道漏了。光有 data-track 和监听远远不够。
最容易被忽略的是：data 属性写得再全，只要没绑定 pointerdown + closest + sendBeacon 这三环，它就只是 HTML 里一段静态文本，不会产生任何一行日志。
