toggle事件仅在用户手动点击summary或按空格/回车触发时执行，不响应js直接赋值open属性或setattribute；须用settimeout(0)延迟读取details.open以获取最新状态，避免布局计算错误。
details元素的toggle事件到底什么时候触发
它只在用户手动点击<summary></summary>或按空格/回车触发展开收起时触发，不响应open属性的JS直接赋值（比如el.open = true）或setAttribute('open', '')。这是规范行为，不是bug。
常见错误是监听click或change——details不派发change事件，而click无法区分是点<summary></summary>还是点内部其他内容。
-
toggle事件对象没有detail字段，无法判断新状态，必须读取event.target.open - 事件冒泡正常，但别在父级用
stopPropagation()，否则会影响无障碍支持 - 服务端渲染或SSR场景下，初始
open状态由HTML决定，toggle只响应后续交互
如何可靠获取折叠/展开后的最新状态
不能依赖event.target.open在事件处理函数开头的值——它反映的是变化前的状态。标准做法是在toggle事件回调中**延迟读取**，或直接在回调末尾读取。
最稳妥写法是用requestAnimationFrame或setTimeout(..., 0)确保DOM更新完成：
details.addEventListener('toggle', () => {
setTimeout(() => {
console.log('当前状态：', details.open);
}, 0);
});
- 不用
requestAnimationFrame也能工作，但setTimeout兼容性更好 - 如果只是做简单UI同步（比如切换图标），直接读
details.open通常没问题；涉及动画或布局计算时务必延迟 - 避免在
toggle里调用details.open = !details.open，会引发无限循环
兼容性与polyfill注意事项
Firefox从75+、Chrome从12+、Safari从15.4+原生支持toggle事件；IE完全不支持，且无polyfill能完美模拟该事件——因为底层依赖浏览器对open属性变更的监听机制。
- 需要兼容旧版Safari（click并手动维护状态变量
- 所有主流现代浏览器都支持
toggle，但部分安卓WebView（如旧版Samsung Internet）可能缺失，建议加特性检测 - 检测方式：
'ontoggle' in document.createElement('details')
为什么不能用MutationObserver监听open属性
虽然open是布尔属性，但浏览器**不会**在用户交互导致状态变化时触发attributeChanged回调。这是出于性能优化：details的open变更不走标准属性变更流程。
-
MutationObserver对open属性变化完全静默，无论增删或设空字符串 - 只有JS直接操作
setAttribute/removeAttribute才会被观察到，但这不属于用户交互路径 - 想统一监听所有状态变更？没捷径——
toggle事件仍是唯一可靠方案
真正容易被忽略的是：toggle事件不冒泡到以外的祖先节点，如果你用事件委托监听全局details交互，得把监听器挂在document或明确父容器上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
