toggle事件仅由用户真实交互触发，JS手动修改open属性不会触发；summary的click事件被浏览器拦截；嵌套或动态插入details需手动重绑监听；newState属性需兼容旧浏览器。
details 元素上 toggle 事件不触发，基本是 JS 手动改 open 属性导致的
直接执行 details.open = true、details.setAttribute('open', '') 或 details.toggleAttribute('open') 都不会触发 toggle 事件——这是浏览器规范行为，不是 bug。只有用户真实交互（点击 <summary></summary>、按空格/回车）才会派发该事件。
常见误判场景：
- 在控制台手动输入
details.open = true后期待 console.log 输出，结果静默 - 用 JS 初始化菜单状态（如从 localStorage 恢复），却忘了同步触发业务逻辑（比如联动其他组件）
- 写了
details.addEventListener('toggle', handler)，但测试时全靠脚本赋值，没点 summary
解决思路：若需统一响应所有开闭动作，必须封装一层控制函数，把 DOM 操作和事件通知解耦：
function setDetailsOpen(details, isOpen) {
const wasOpen = details.open;
details.open = isOpen;
// 手动 dispatch，补上缺失的 toggle 行为
if (wasOpen !== isOpen) {
details.dispatchEvent(new Event('toggle', { bubbles: true }));
}
}
summary 标签上绑 click 事件完全没反应？那是浏览器故意拦的
<summary></summary> 的 click 事件被 Chrome/Firefox/Safari 原生拦截，专用于控制 <details></details> 开合——你加的 onclick 或 addEventListener('click', ...) 默认收不到。
立即学习“前端免费学习笔记（深入）”；
典型表现：
- 想在点击 summary 时上报埋点，但
console.log从不执行 - summary 里放了图标或按钮，期望点击它弹窗，结果什么都没发生
- 用
event.stopPropagation()强行阻止冒泡，反而破坏了原生折叠逻辑
正确做法：监听父级 <details></details> 的 toggle 事件，并通过 e.target 判断是否来自 summary 内部：
details.addEventListener('toggle', (e) => {
if (e.target.querySelector('summary') === e.target) {
// 点的是 summary 本身（非子元素）
trackClick('details-summary');
}
});
嵌套 details 或动态插入时 toggle 事件丢失，iOS Safari 尤其明显
三层及以上嵌套、或 JS 动态插入 <details></details> 后未重新绑定监听，会导致 toggle 事件不触发，iOS Safari 下概率最高。
根本原因：
- 原生 UA 行为在深层嵌套时对事件路径处理不一致
- 动态插入的元素不会自动继承已绑定的事件监听器
- Safari 对
details[open]的样式重绘和事件触发有延迟，有时甚至跳过
实操建议：
- 动态插入后立即调用
details.addEventListener('toggle', handler)，别依赖事件委托 - 对 iOS Safari 加兜底轮询：
setInterval(() => { if (details.open !== lastOpen) { handleToggle(details.open); lastOpen = details.open; } }, 100) - 避免在 summary 里嵌套可交互元素（如
<button></button>），否则外层 UA 可能抢走事件焦点
监听了 toggle 却读不到 newState？检查浏览器支持和事件对象来源
ToggleEvent.newState 是现代浏览器才支持的属性，且**仅对 <details></details> 有效**；<popover></popover> 完全不支持该事件，也不存在 newState。
容易踩的坑：
- 在 popover 上监听
toggle事件并试图读e.newState→undefined，且控制台无报错 - 用旧版 Safari（≤15.6）测试，
e.newState返回undefined，得退回到e.target.open - 事件监听写在父容器上，误以为
toggle会冒泡到外层 —— 实际只触发在目标<details></details>自身
安全写法（兼容 + 明确）：
details.addEventListener('toggle', (e) => {
const isOpen = 'newState' in e ? e.newState === 'open' : e.target.open;
console.log('当前是否展开:', isOpen);
});
真正难搞的不是监听本身，而是混合使用原生语义与手动控制时的状态同步——比如 SSR 渲染后 hydration 阶段，DOM 状态和 JS 变量不同步，又没做 reconcile，后续所有 toggle 逻辑都会错位。
