toggle事件非兼容性问题而是用法错误：仅用户点击summary时触发，须用addEventListener('toggle')监听，ontoggle等写法无效；检测应使用createElement后addEventlistener是否报错。
details 元素的 toggle 事件根本不是“浏览器兼容性问题”，而是“你写错了”
很多人搜“HTML toggle 事件兼容性”，结果卡在 Safari 不触发、Chrome 没反应、IE 报错——其实根本不是兼容性问题，是误以为 toggle 是个像 click 那样可内联或自动冒泡的通用事件。它只在用户点击 addEventListener('toggle', ...) 显式监听，写成 ontoggle、onToggle 或绑到
如何正确检测 toggle 事件是否可用
别查 typeof HTMLDetailsElement.prototype.ontoggle——它永远是 undefined，这个属性压根不存在。真正该测的是：浏览器是否支持 toggle 类型事件本身，以及是否能被 addEventListener 注册。
- 最简检测：
typeof window.Event === 'function' && 'toggle' in window.Event - 更稳妥（推荐）：
const details = document.createElement('details'); details.addEventListener('toggle', () => {}, { once: true });—— 如果没报错，说明支持 - 旧版 Safari（'toggle' in Event 不够，必须实测绑定
JS 修改 open 属性时 toggle 事件不触发，这不是 bug 是设计
这是最容易踩的坑：details.open = true、details.setAttribute('open', '')、甚至 details.toggleAttribute('open') 都不会触发 toggle 事件。它只响应用户交互（鼠标点击、空格键、回车键），不响应 JS 状态变更。
- 如果你需要统一处理所有开闭逻辑（比如存 localStorage、联动其他组件），必须自己封装函数，比如
setDetailsOpen(detailsEl, isOpen) - 不要在监听器里依赖
e.detail——它始终是undefined；要用e.target.open或e.newState（值为'open'或'closed'） - 事件不冒泡，无法委托到父容器；想批量监听多个
降级方案不能只靠 CSS，得有 JS 回退路径
当 toggle 事件不可用时，open 属性控制显隐），但你失去了状态变化的感知能力。这时候不能只加个 @supports (display: details) {...} 就完事。
- 用
details.hasAttribute('open')做初始状态判断，再配合click事件监听 - 对
keydown，捕获空格/回车，避免键盘操作失焦 - IE11 及以下不支持
open属性都不存在，得完全重写真正难的不是写监听器，而是区分清楚：哪些行为必须由用户触发（
toggle）、哪些可以由 JS 主动驱动（open属性）、哪些状态必须跨两者同步（比如本地存储）。混用却不隔离，才是兼容性崩塌的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
