details 的 toggle 事件不支持 ontoggle 内联绑定，须用 addEventListener；仅响应用户交互，不冒泡；状态应通过 hasAttribute('open') 判断，避免误读；多实例需唯一 data-id 标识；需防与通用点击埋点冲突。
details 元素的 toggle 事件不能用 ontoggle 内联绑定
浏览器压根不支持 ontoggle 这个 HTML 属性，写成 <details ontoggle="track()"></details> 完全静默，不会触发任何回调，也不会报错。这是最常被搜错的关键词——很多人在搜索引擎里输“ontoggle”，结果抄了错误模板。
必须用 JS 显式监听：
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
// 埋点逻辑
});
-
toggle事件只对用户交互生效：点击<summary></summary>、按空格/回车键；JS 修改open属性（如details.open = true）不会触发它 - 该事件不冒泡，不能在父元素上做事件委托，必须直接绑定到每个
<details></details>节点 - IE 和 Edge ≤18 完全不支持；Safari ≤15.4 存在延迟或丢失，需降级兜底（例如 fallback 到 click 监听
<summary></summary>）
读取展开状态别直接信 event.target.open
event.target.open 在大多数情况下是同步更新的，但 SSR 渲染 + JS 补充监听的场景下，DOM 状态可能尚未完成渲染，直接读会拿到旧值。尤其在 Safari 15.4 或部分安卓 WebView 中，if (e.target.open) { track('expand') } 容易误判。
更可靠的方式是查 DOM 属性本身：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
details.hasAttribute('open')—— 它反映的是真实渲染层状态，比布尔属性更稳定 - 如果必须依赖事件回调内读取，加一层异步延迟：
setTimeout(() => console.log(details.hasAttribute('open')), 0)或requestAnimationFrame(() => {}) -
e.detail始终是undefined，不要试图从中取值
多个 details 共存时埋点要带上下文标识
FAQ 列表、配置面板等页面常含多个 <details></details>，若所有监听器共用同一段埋点代码，数据将无法区分来源，导致分析失真。
实操建议：
- 给每个
<details></details>加唯一标识：<details data-id="faq-3"></details> - 埋点参数至少包含：
{ event: 'details_toggle', id: details.dataset.id, open: details.hasAttribute('open') } - 避免在回调中手动赋值
details.open = true/false—— 这会引发二次状态变更，可能造成循环或与其他逻辑冲突 - 如需联动控制（比如单选折叠），应在回调中手动设置其他
<details></details>的open属性，但注意：JS 设置不会触发它们的toggle事件，所以无需担心嵌套触发
和通用点击埋点系统容易产生冲突
如果你已有一套基于事件代理的全局点击埋点（比如监听 document 捕获阶段、匹配 data-track），<details></details> 内部的 <summary></summary> 很可能同时命中两次：一次是 toggle 事件监听，一次是通用点击监听。结果就是同一次用户操作上报两条数据，且字段语义不同（一个是结构展开行为，一个是按钮点击），清洗困难。
解决思路：
- 在通用点击监听逻辑中，加一层过滤：
if (e.target.closest('details')) return; - 或者统一收口：把
<summary></summary>视为可埋点元素，用data-track="details_summary"标记，由通用系统采集，不再单独监听toggle - 关键点在于：不要让两种机制并行作用于同一交互目标，否则竞态和重复就藏在毫秒级的事件调度里，很难复现，但数据污染会长期存在
