ontoggle属性仅适用于元素，是其专属属性，其他标签添加无效；toggle事件仅响应用户交互，js修改open属性不会触发；支持浏览器为chrome 101+、firefox 98+、safari 15.4+。
ontoggle 属性只能用在 <details></details> 上，其他标签加了也没用
它不是通用事件处理器，而是 <details></details> 元素的专属属性。给 <div>、<code><section></section> 甚至 <summary></summary> 加 ontoggle，浏览器既不报错也不触发——纯静默失效。
原因很直接：HTML 规范里 toggle 事件只定义在 <details></details> 的生命周期中，和它的 open 属性切换强绑定。没有这个语义，底层就没有事件派发机制。
常见误操作包括：
- 在
<summary></summary>上写ontoggle—— 不会响应 - 用 JS 给非
<details></details>元素调用addEventListener('toggle', ...)—— 监听器注册成功，但永远不会被调用 - 以为
ontoggle是类似onclick的通用属性 —— 实际它是 HTML5 为<details></details>单独设计的
ontoggle 和 addEventListener('toggle', ) 的行为差异
两者都能监听状态变化，但适用场景和限制完全不同：
-
ontoggle是 HTML 属性，只能绑定一个函数，重复赋值会覆盖前一个，适合简单日志或单点控制 -
addEventListener('toggle', )支持多个监听器共存，适合模块化开发或第三方脚本介入 -
ontoggle写在 HTML 里，执行上下文受限（比如拿不到闭包变量）；JS 监听可自由访问作用域内数据 - 两者都**不冒泡**，所以不能委托到父容器统一处理多个
<details></details>
示例对比：
<details ontoggle="console.log('open:', this.open)"><summary>点我</summary>
内容区
</details>
等价于：
document.querySelector('details').addEventListener('toggle', (e) => {
console.log('open:', e.target.open);
});
toggle 事件只响应用户点击，JS 修改 open 属性不会触发
这是最常被忽略的边界条件：只有用户真实交互（鼠标点击、空格键、回车键触发 <summary></summary>）才会派发 toggle 事件。
以下操作**完全不会触发**该事件：
-
detailsEl.open = true或detailsEl.open = false -
detailsEl.setAttribute('open', '')或detailsEl.removeAttribute('open') detailsEl.toggleAttribute('open')
如果你需要统一响应所有开闭动作（包括 JS 控制），得自己封装逻辑，比如：
- 定义一个
setDetailsOpen(details, isOpen)函数 - 函数内部先设置
open，再手动调用你的业务回调 - 避免混用原生点击和脚本控制，否则状态与副作用容易脱节
浏览器兼容性与实际可用性判断
目前稳定支持 toggle 事件的浏览器是：Chrome 101+、Firefox 98+、Safari 15.4+。老版本 Safari（如 14.x）和所有 IE 版本都不支持。
注意几个现实问题：
- 部分文档说 “Chrome 12+ 支持”，那是早期实验性支持，实际稳定可用要晚得多
- 移动端 WebView（尤其 Android 旧版 Chrome WebView）可能表现不一致
- 如果项目需兼容 Firefox 90 或 Safari 14，建议降级方案：监听
click事件 + 手动读取open属性
真正落地时，别只看“是否支持 toggle”，得看你的用户实际用什么版本——很多企业内网环境还卡在旧浏览器上。
