toggle事件不冒泡，只能在details元素自身监听；document或父容器监听无效，closest/matches无用；正确做法是批量querySelectorAll并forEach绑定，抽离统一处理函数。
details 的 toggle 事件不能委托
直接告诉你结论：toggle 事件不冒泡，无法在父元素上监听它。你写 document.addEventListener('toggle', ...) 或 container.addEventListener('toggle', ...) 都不会触发——浏览器根本不会把 toggle 往上传。这不是写法问题，是规范限制：它只在 details 元素自身上派发，且仅响应用户点击 summary 的行为。
为什么 closest() 和 matches() 对 toggle 无效
因为 e.target.closest('.my-details') 这类判断压根用不上——toggle 事件根本不会到达父级，自然没有冒泡路径可遍历。你试图在 .list 容器里监听 toggle，结果连回调都不会进。常见错误还包括：
- 误以为
onbeforetoggle是可用属性（实际应监听'toggle'字符串，且不能内联写ontoggle） - 在 React/Vue 中用 ref 绑了
toggle监听器，但组件卸载后没清理，导致内存泄漏（虽然事件不冒泡，但监听器本身还挂在 DOM 节点上） - 用
e.target.open判断状态时，没注意它只在事件触发后才更新，JS 手动设open = true不会触发事件，也不会同步更新该值（等等，它其实会——但事件根本没发生）
真正可行的“伪委托”方案
如果你页面有几十个 details，又不想写重复的 addEventListener，可以用批量绑定 + 统一处理函数，而不是真委托：
- 用
document.querySelectorAll('details')一次性获取全部，再forEach绑定，避免手动写 N 次 - 把业务逻辑抽成独立函数，比如
handleDetailsToggle(detailsEl, isOpen)，所有回调都调它 - 若需兼容旧浏览器（Safari 'toggle' in Event 或直接 fallback 到监听
click并手动切换open属性 - 动态插入新
details时，别指望旧监听器自动生效——必须显式对新节点再调一次绑定逻辑
容易被忽略的兼容性硬伤
toggle 事件在 Safari 15.4+、Chrome 101+、Firefox 98+ 才稳定支持。旧版 Safari 不报错也不执行回调，静默失败。更麻烦的是：它不触发 composed: true，在 Shadow DOM 内部也无法穿透。如果你的组件用了 attachShadow，又想封装一个可复用的折叠面板，那 toggle 事件基本没法跨边界通信——得靠自定义事件中转或暴露方法控制。
立即学习“前端免费学习笔记（深入）”；
