details元素的toggle事件仅在用户点击summary时触发一次，所谓“重复触发”实为监听器冗余、渲染未清理、日志干扰或状态误判所致；React中应禁用原生行为，用onClick+useState完全控制开闭。
details 元素的 toggle 事件根本不会“重复触发”
所谓“触发两次”，99% 是误判：浏览器原生 toggle 事件只在用户点击 <summary></summary>（或按空格/回车）时派发一次，且仅限该次交互。你看到的“重复日志”，基本来自以下几种情况：
-
<summary></summary>上同时绑了onclick和addEventListener('toggle', ...)，两个回调都执行了 - React/Vue 组件重渲染时没清理旧监听器，每次挂载都新增一个
addEventListener - 你在
console.log前用了console.count('toggle')，但误以为是事件触发两次，其实是日志计数逻辑干扰 - 用
e.target.open判断状态，却在 Safari ≤15.4 或某些 WebView 中读到旧值，导致埋点逻辑误判为“状态反复切换”
React 中 details 状态错乱的典型修复
React 不接管 <details open></details> 的 DOM 属性变更，所以不能靠监听 toggle 来更新 state——必须让 React 完全控制开闭逻辑，并禁用原生行为：
- 给
<summary></summary>绑onClick，并在回调开头加e.preventDefault() - 用
useState管理isOpen，并通过open={isOpen}显式透传给<details></details> - 绝对不要在
toggle回调里调用setIsOpen，它和你的onClick是竞争关系 - 多个
<details></details>需手风琴效果？state 应存 ID 字符串或索引，而不是布尔值
监听 toggle 事件却收不到回调？先检查兼容性
toggle 事件不是所有浏览器都支持，而且不冒泡、不能内联绑定（ontoggle="..." 完全无效）。真实支持情况比 MDN 写的更苛刻：
- Safari ≤15.4：事件可能延迟、丢失，甚至静默失败（不报错也不执行）
- Chrome ≤101 / Firefox ≤98：存在偶发不触发问题
- IE 全系：不支持，永远不触发
- 检测方式别用
'toggle' in Event，改用typeof details.addEventListener === 'function' && 'toggle' in HTMLDetailsElement.prototype - 降级方案：对不支持的环境，退回到
onClick+ 手动切换open属性 + 主动 dispatch 自定义事件
手动设置 open 属性时如何补发 toggle 事件
JS 调用 details.open = true 或 details.toggleAttribute('open') 不会触发 toggle 事件——这是规范行为，不是 bug。若需统一埋点或联动逻辑，得自己模拟：
立即学习“前端免费学习笔记（深入）”；
- 封装函数如
setDetailsOpen(detailsEl, isOpen)，内部先设属性，再 dispatch 事件 - dispatch 时用
new Event('toggle', { bubbles: false })，并手动挂载target和newState属性 - 不要依赖
e.detail：它始终是undefined，状态必须从e.target.hasAttribute('open')或e.target.open读取 - 埋点参数务必带上下文标识，例如
{ id: details.dataset.id, open: details.hasAttribute('open') }
真正容易被忽略的点是：事件本身没问题，出问题的永远是状态管理与事件监听的耦合方式。混用原生切换和 JS 控制，才是绝大多数“重复触发”表象的根源。
