toggle事件兼容性检测必须通过真实点击summary触发并验证回调执行，仅检查属性或派发事件无效；Chrome 101+、Firefox 98+、Safari 15.4+稳定支持，旧版Safari及Edge 12–18存在延迟、丢失或不派发问题。
直接检测 toggle 事件是否可用，别查 ontoggle
浏览器根本不存在 ontoggle 这个属性或事件名，查 'ontoggle' in HTMLDetailsElement.prototype 或 element.ontoggle 是无效的。真正要检测的是：当前环境是否支持对 details 元素调用 addEventListener('toggle', ...) 并实际触发回调。
推荐写法：
function supportsToggleEvent() {
const el = document.createElement('details');
if (!('addEventListener' in el)) return false;
let triggered = false;
const handler = () => { triggered = true; };
el.addEventListener('toggle', handler, { once: true });
el.open = true; // 不会触发事件，只是确保 DOM 可操作
// 模拟一次用户交互（关键）：
el.querySelector('summary')?.click();
return triggered;
}
说明：
- 不能只靠
'toggle' in Event—— Safari ≤15.4 返回true，但实际不触发 - 不能只靠
typeof el.addEventListener === 'function'—— 所有现代浏览器都满足，但旧版 Safari 仍可能静默失败 - 必须真实触发一次交互（
click()），再看 handler 是否执行 —— 这是唯一能验证“运行时行为”的方式 - 注意：该检测需在 DOM ready 后执行，且
details必须已挂载（含summary子元素），否则querySelector('summary')为空
toggle 事件兼容性的真实底线
Chrome 101+、Firefox 98+、Safari 15.4+ 算稳定；但 Safari 15.0–15.3 存在延迟触发甚至丢失问题，Edge 12–18 完全不派发该事件，IE 全系不支持。
立即学习“前端免费学习笔记（深入）”；
如果你的项目需覆盖企业内网或微信 WebView（尤其旧版 X5 内核），别依赖检测结果做分支逻辑——直接降级为手动监听 click + hasAttribute('open') 更可靠：
const details = document.querySelector('details');
details.addEventListener('click', (e) => {
if (e.target.tagName === 'SUMMARY') {
const isOpen = details.hasAttribute('open');
console.log(isOpen ? '已展开' : '已收起');
}
});
注意：
- 这种降级方案无法区分键盘操作（空格/回车），但至少保证鼠标点击可埋点
- 必须限定
e.target.tagName === 'SUMMARY'，否则内部内容点击也会误触发 -
hasAttribute('open')比读details.open更稳妥，它反映的是渲染层真实状态，不受 JS 属性赋值干扰
为什么不能用 dispatchEvent 模拟检测？
有人试图用 el.dispatchEvent(new Event('toggle')) 来检测支持性，这完全无效：
-
toggle事件是浏览器原生控制流的一部分，仅由用户交互触发，不可手动派发 - 即使派发成功，也不会改变
details.open状态，也无法触发真实副作用（比如 DOM 重排） - 部分旧版 Safari 会静默忽略该事件，既不报错也不执行回调，导致检测永远返回
false
真正的兼容性边界不在“能不能注册”，而在“点一下 summary，回调会不会执行”。所有绕过真实交互的检测，都会在 Safari 15.2 或某些安卓 WebView 中翻车。
