details元素的toggle事件仅在用户点击summary时触发一次，所谓“重复触发”实为监听器冗余、渲染未清理、日志干扰或状态误判所致；React中应禁用原生行为，用onClick+useState完全控制开闭。

details 元素的 toggle 事件根本不会“重复触发”

所谓“触发两次”，99% 是误判：浏览器原生 toggle 事件只在用户点击

（或按空格/回车）时派发一次，且仅限该次交互。你看到的“重复日志”，基本来自以下几种情况：

• 上同时绑了 onclick 和 addEventListener('toggle', ...)，两个回调都执行了
• React/Vue 组件重渲染时没清理旧监听器，每次挂载都新增一个 addEventListener
• 你在 console.log 前用了 console.count('toggle')，但误以为是事件触发两次，其实是日志计数逻辑干扰
• 用 e.target.open 判断状态，却在 Safari ≤15.4 或某些 WebView 中读到旧值，导致埋点逻辑误判为“状态反复切换”

React 中 details 状态错乱的典型修复

React 不接管

的 DOM 属性变更，所以不能靠监听 toggle 来更新 state——必须让 React 完全控制开闭逻辑，并禁用原生行为：

• 给
  绑 onClick，并在回调开头加 e.preventDefault()
• 用 useState 管理 isOpen，并通过 open={isOpen} 显式透传给
• 绝对不要在 toggle 回调里调用 setIsOpen，它和你的 onClick 是竞争关系
• 多个
  需手风琴效果？state 应存 ID 字符串或索引，而不是布尔值

监听 toggle 事件却收不到回调？先检查兼容性

toggle 事件不是所有浏览器都支持，而且不冒泡、不能内联绑定（ontoggle="..." 完全无效）。真实支持情况比 MDN 写的更苛刻：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 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 控制，才是绝大多数“重复触发”表象的根源。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！