details元素的toggle事件必须用addEventListener('toggle')监听，不能使用ontoggle属性；读取状态应优先用hasAttribute('open')而非event.target.open，多个details需加data-id标识以确保埋点上下文准确。
details 元素的 toggle 事件根本不是 ontoggle
直接写 <details ontoggle="track()"></details> 完全无效，浏览器压根不识别这个属性，也不会触发任何回调。toggle 是一个原生 DOM 事件，必须用 addEventListener('toggle', handler) 显式监听，且只响应用户真实交互（点击 <summary></summary>、空格/回车），JS 修改 open 属性不会触发它。
上报前必须可靠读取当前展开状态
别信 e.target.open —— 在 Safari 15.4 或某些安卓 WebView 中，事件触发时 DOM 渲染可能未同步，读到的仍是旧值。最稳的方式是用 details.hasAttribute('open')，它反映的是真实渲染层状态，不受 JS 执行时机干扰。
- 错误写法：
if (e.target.open) { sendBeacon('/log', { action: 'expand' }) } - 推荐写法：
const isOpen = details.hasAttribute('open'); sendBeacon('/log', { action: isOpen ? 'expand' : 'collapse', id: details.dataset.id })
多个 details 共存时，埋点必须带上下文标识
页面里有 FAQ 列表或配置面板时，每个 <details></details> 都要加 data-id，否则后端收不到来源信息，分析时全是“未知折叠项”。同时避免在 handler 里手动设 details.open = true/false，这会引发二次状态变更，但不触发事件——看似安全，实则破坏单次操作语义。
- HTML 示例：
<details data-id="faq-3"><summary>怎么退款？</summary>...</details> - 上报字段至少含：
{ event: 'details_toggle', id: details.dataset.id, open: details.hasAttribute('open') }
IE 和旧 Safari 不支持，得有降级方案
IE 和 Edge ≤18 完全不支持 toggle 事件；Safari ≤15.4 存在延迟或丢失问题。如果业务仍需兼容，不能只靠 addEventListener('toggle')。可监听 click 事件，再用 setTimeout(() => {}, 0) 延迟读取 hasAttribute('open')，模拟 toggle 行为——虽然不够精准，但至少能捕获用户意图。
立即学习“前端免费学习笔记（深入）”；
真正难处理的不是上报逻辑本身，而是状态读取时机和跨浏览器一致性。很多漏报不是因为没发请求，而是发了却带着错误的 open 值。
