必须用 addeventlistener('toggle') 监听 details 标签展开收起，ontoggle 属性无效且不被解析；toggle 事件不冒泡、仅用户交互触发；读取状态应使用 hasattribute('open') 而非 event.target.open。
details 标签点击时不会自动发埋点，必须用 addEventListener('toggle') 监听，且不能靠内联 ontoggle 或监听 click —— 否则键盘操作、屏幕阅读器交互、Safari 兼容性全掉链子。
为什么不能写 ontoggle 属性？
浏览器根本不解析 ontoggle 这个属性，<details ontoggle="track()"></details> 完全静默，无任何报错也无回调执行。这是 HTML 规范未定义的伪属性，不是兼容性问题，是语法无效。
- 唯一合法方式是 JS 显式绑定：
detailsEl.addEventListener('toggle', handler) -
toggle事件不冒泡，不能在父容器上委托监听 - JS 修改
open属性（如el.open = true）不会触发该事件，仅用户交互（鼠标点击<summary></summary>、空格/回车键）才触发
怎么读取当前展开状态才靠谱？
别直接信 event.target.open，尤其在 SSR 渲染 + JS 补充监听的场景下，DOM 更新可能滞后，读到的是旧值。更稳的方式是查 DOM 属性本身。
- 推荐：
detailsEl.hasAttribute('open')—— 反映真实渲染层状态，跨浏览器一致 - 避免：
if (e.target.open) { ... }—— Safari ≤15.4 和部分安卓 WebView 中有误判风险 - 如果必须用
open属性，加一层延迟：requestAnimationFrame(() => console.log(detailsEl.open))
埋点参数怎么带上下文？
多个 details 共存（比如 FAQ 列表）时，不加标识会导致所有埋点混在一起，无法归因。
- 每个
<details></details>加data-id：<details data-id="faq-contact"></details> - 埋点对象至少含：
{ event: 'details_toggle', id: detailsEl.dataset.id, open: detailsEl.hasAttribute('open') } - 禁止在
toggle回调里手动设detailsEl.open = true/false—— 可能引发二次状态变更，干扰其他联动逻辑
最易被忽略的一点：自定义箭头若用 summary::after 实现，但没加 cursor: pointer，Safari 上点击热区会变窄，用户点中了却没反应，埋点自然也漏了——状态没变，事件就不发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
