beforetoggle 事件不存在于HTML标准，浏览器也不支持；唯一可监听的是toggle事件，但它在状态变更后触发，无法阻止切换，需用preventDefault()配合手动控制open属性。
beforetoggle 事件根本不存在
HTML 标准里没有 beforetoggle 事件，浏览器也不支持监听它。所谓“在打开前拦截”，是开发者对原生 details 行为的误判。真实可监听的只有 toggle 事件，但它在状态**已变更后**才触发，无法阻止切换。
想阻止 details 展开，只能靠 preventDefault() + 手动控制 open
原生 details 点击 summary 会自动翻转 open 属性。要干预这个过程，必须：
- 不依赖
toggle事件来驱动状态 —— 它只适合做副作用（如埋点、动画启动），不能用于控制逻辑 - 给
summary绑onClick，并在第一行调用e.preventDefault() - 用
useState（React）或el.open = false（原生）显式设置目标状态 - 把
open属性作为受控属性透传回去，彻底绕过浏览器默认行为
React 中常见错误写法及修复
下面这段代码会导致状态错乱、看似“触发两次”：
<details onClick={() => setIsOpen(!isOpen)}>
<summary>标题</summary>
<p>内容</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</details>
问题在于：onClick 没有 preventDefault()，浏览器先改了 DOM 的 open，React 再 setState，两者脱节。
正确写法是：
<details open={isOpen}>
<summary onClick={(e) => { e.preventDefault(); setIsOpen(!isOpen); }}>
标题
</summary>
<p>内容</p>
</details>
注意两点：显式传 open 属性，且只在 summary 上处理点击。
监听 toggle 事件时重复执行？大概率是没清理监听器
如果你用 addEventListener('toggle', handler) 并发现日志打两遍，不是事件本身重复，而是：
- 组件重渲染时反复添加监听器，但没在卸载时
removeEventListener - 在
useEffect里注册却没返回清理函数 - 手写 JS 放在循环或条件判断里，导致多次绑定
useEffect(() => {
const handler = () => console.log('toggled');
el.addEventListener('toggle', handler);
return () => el.removeEventListener('toggle', handler);
}, []);
真正需要“拦截展开”的场景极少；多数时候，你只是没意识到 details 的 open 是单向反射，不是响应式信号。别试图在它身上模拟“before”语义，直接接管状态更稳。
立即学习“前端免费学习笔记（深入）”；
