应优先监听toggle事件，chrome/edge 120+支持，firefox不支持；降级用click监听summary并检查open属性变化；需捕获所有状态变更时用mutationobserver监听open属性，注意显式设置attributefilter。
details元素的toggle事件怎么监听
原生 <details></details> 元素不触发 toggle 事件（注意：不是所有浏览器都支持，且规范中该事件是“可选实现”）。Chrome 和 Edge 从 120+ 版本开始支持，但 Firefox 目前（截至 128）仍不支持 toggle 事件。所以不能无条件依赖它。
正确做法是监听 toggle 事件 + 降级监听 click 或检查 open 属性变化：
- 先尝试监听
toggle：它只在用户交互（点击 summary）时触发，不会因 JS 修改open属性而触发 - 若需兼容旧版或 Firefox，用
click监听<summary></summary>，再手动判断details.open是否改变 - 避免监听
change——<details></details>不会触发该事件
用 MutationObserver 监听 open 属性变化
当需要捕获所有 open 状态变更（包括 JS 设置 details.open = true），toggle 和 click 都不够用。此时得用 MutationObserver 观察 open 属性：
const details = document.querySelector('details');
const observer = new MutationObserver(() => {
console.log('open 状态变为：', details.open);
});
observer.observe(details, { attributes: true, attributeFilter: ['open'] });
注意点：
-
attributeFilter: ['open']必须显式指定，否则可能漏掉或误报 - 该方式对性能影响极小，但不要在大量
<details></details>上无节制使用 - 它无法区分是用户操作还是代码设置——如需区分，得结合 flag 变量临时屏蔽 observer
summary 点击后阻止默认行为会怎样
给 <summary></summary> 绑 click 并调用 event.preventDefault()，会导致 <details></details> 的展开/收起行为被完全禁用——哪怕没 JS 错误，UI 也会“卡住”。
常见错误场景：
- 想自定义动画，于是阻止默认，再手动切
open，但忘了同步控制<details></details>内容显隐 - 在
summary上绑了多个 handler，某个中间件意外调用了preventDefault() - 使用 Shadow DOM 封装时，事件流截断导致默认行为未冒泡到
<details></details>
安全做法：不阻止默认，改用 toggle 事件或 MutationObserver 响应状态，让浏览器管开闭逻辑。
React/Vue 中怎么处理 details 切换
框架里直接操作 open 属性容易和框架的响应式机制冲突。比如 React 中写 <details open="{isOpen}"></details>，但又用 ref 手动调 elt.toggleAttribute('open')，会导致状态不同步。
推荐方式：
- React：用受控组件，
open完全由 state 驱动，summary 点击时setIsOpen(!isOpen)；避免直接操作 DOM - Vue：用
v-model:open（Vue 3.4+ 支持），或用:open+@toggle（如果目标浏览器支持） - 都不建议在
useEffect/onMounted里主动调elt.open = true——这会绕过响应式，下次 re-render 可能覆盖掉
细节容易被忽略：<details></details> 的初始 open 属性是“单次生效”的，JS 后续赋值会覆盖它，但框架 diff 时可能按虚拟 DOM 的 open 值重置真实 DOM，造成闪烁或状态丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
