<p>data-* 属性仅为静态数据容器，埋点需JS监听+构造+上报；常见错误包括未用事件委托、敏感字段暴露、字符串误判布尔值；应使用closest()查找目标元素，移动端优先pointerdown，上报用sendBeacon。</p>
data-* 属性只是数据容器，不是埋点逻辑本身
写了 data-track="search_submit" 不代表埋点就生效了。浏览器不会自动监听、解析或上报这个字符串——它只是一段静态 HTML 文本。真正触发埋点的是 JS 事件监听 + 数据构造 + 上报调用。如果你只改 HTML、不补 JS，控制台里看不到日志，服务端也收不到任何数据。
常见错误包括：
- 在 Vue/React 动态渲染的按钮上直接用
querySelector绑定 click，没用事件委托，新插入的节点完全不响应 - 把
data-user-id="u_abc123"这类字段直接暴露在源码中，被爬虫或恶意脚本轻易提取 - 以为
data-active="true"是布尔值，结果if (el.dataset.active)永远为真（因为字符串非空即真）
监听必须用 event.target.closest('[data-track]')
用户点击按钮内部的图标或文字时，event.target 往往是子元素（比如 i 或 span），不是带 data-track 的父容器。如果只检查 event.target.hasAttribute('data-track')，90% 的点击会漏报。
正确做法是向上查找最近的匹配祖先：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('click', e => {
const el = e.target.closest('[data-track]');
if (!el) return;
const payload = {
event: el.dataset.track,
id: el.dataset.eventId,
url: location.href,
timestamp: Date.now()
};
sendLog(payload);
});
注意：移动端优先监听 pointerdown，iOS 和 Android 主流 WebView 对 click 有 300ms 延迟或不触发；touchstart 兼容性好但易误触（滚动时触发）。
上报必须用 navigator.sendBeacon
用户点击后立刻跳转或关闭页面，fetch 或 XMLHttpRequest 发出的请求大概率被浏览器终止——这是埋点丢失最常见原因。
navigator.sendBeacon 能在页面卸载前异步发出 POST 请求，且不阻塞导航：
- 只支持 POST 方法
- body 必须是
ArrayBuffer、Blob、FormData或URLSearchParams - 不能设自定义 header（如
Authorization），需靠后端识别来源 IP 或 Referer
示例：
const data = new URLSearchParams(payload);
navigator.sendBeacon('/log', data);
data-* 的类型和命名必须手动约束
dataset 读出来的全是字符串：data-count="5" → el.dataset.count === "5"，不是数字；data-loading="true" → el.dataset.loading === "true"，不是布尔值。硬转可能出错，尤其在条件判断或计算场景下。
推荐实践：
- 用
el.hasAttribute('data-loading')判断存在性，而非el.dataset.loading === 'true' - 数值字段统一加后缀，如
data-sort-priority-number="2"，避免歧义 - 敏感字段（token、secretKey）禁止写入
data-*，应走 runtime 注入或环境变量 - 属性名必须用 kebab-case，且加项目前缀，如
data-shop-track，防第三方库冲突
复杂排序或嵌套字段（如 user.profile.name）别用点号，改用连字符：data-sort-key="user-profile-name"，再在 JS 中做映射转换。
