根本不存在“toggle事件重复触发”，所谓重复全是监听器重复绑定或混用原生行为导致的状态错乱；浏览器对的toggle事件只派发一次，且仅在用户点击时发生。

根本不存在“toggle事件重复触发”——所谓重复，全是监听器重复绑定或混用原生行为导致的状态错乱。

为什么 toggle 事件看起来触发了两次

浏览器对 <details></details> 的 toggle 事件只派发一次，且仅在用户点击 <summary></summary> 时发生。所谓“两次”，基本就这三种情况：

• <summary></summary> 上同时写了 onclick 和 addEventListener('toggle', ...)，两个回调都执行了
• React/Vue 组件重渲染时没清理旧监听器，useEffect 里反复调用 addEventListener('toggle', handler) 却没返回 removeEventListener
• 手动设置 details.open = true 后又监听 toggle，误以为 JS 修改也该触发——它不会

React 中正确监听并防重复的写法

不要依赖 toggle 事件更新 state；让 onClick 完全接管，禁用原生切换逻辑：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 给 <summary></summary> 绑 onClick，开头必须加 e.preventDefault()
• 用 useState 管理 open 状态，并通过 open={isOpen} 显式透传给 <details></details>
• 完全不监听 toggle 事件——你已用 click 控制全部入口，不需要它
• 如果真要埋点，就在 onClick 回调里发，读 !isOpen 判断是展开还是收起

原生 JS 批量绑定时如何避免重复监听

多个 <details></details> 共存时，最容易在动态插入或组件复用中重复绑定：

立即学习“前端免费学习笔记（深入）”；

• 别在 render 函数里直接写 el.addEventListener('toggle', handler)——每次渲染都加一遍
• 用 useEffect（React）或 connectedCallback（Web Component）注册，且必须返回清理函数：() => el.removeEventListener('toggle', handler)
• 调试时用 console.count('toggle fired')，而不是 console.log，避免误判日志重复
• 不要试图用事件委托——toggle 事件不冒泡，父元素监听不到

最常被忽略的点：状态和 DOM 不同步比事件重复更危险。一旦 details.open 和你维护的 state 对不上，后续所有判断都会失准——这时候删掉所有 toggle 监听器，老老实实用 onClick + preventDefault + useState 重控一遍，反而最快。