details的默认切换无法通过preventdefault阻止，唯一禁用方式是disabled属性，但会破坏无障碍支持；推荐改用button绑定操作并阻止冒泡，或用div+js手动管理open及aria属性。
details标签的默认点击行为根本不能用preventDefault阻止
因为summary元素的点击本身没有可取消的默认行为，浏览器内部是直接修改details.open并派发toggle事件，不是靠click事件驱动切换。你在summary.onclick里写e.preventDefault()或return false完全无效——它既不阻止展开，也不影响收起。
唯一能禁用原生切换的方式是设disabled属性
只有<details disabled></details>这个HTML属性能真正切断浏览器对summary点击和键盘（空格/回车）的响应。之后你必须完全接管状态控制：
- 用
el.open = true或el.open = false手动设置，不能用setAttribute('open', ...) - 监听
summary的click事件，在里面判断条件后赋值 - 若需键盘支持，还得额外监听
keydown，自己处理空格/回车逻辑
但disabled会彻底破坏无障碍支持
这是最容易被忽略的关键点：disabled会让屏幕阅读器跳过整个details，键盘焦点也无法进入，summary失去语义角色。如果你的项目需要符合WCAG或有残障用户访问需求，这种方案实际不可行。
更现实的做法是：不阻止原生行为，而是在toggle事件中立即反转状态——但这会导致视觉闪动，且第一次点击仍会完成一次展开/收起。
想实现“点击summary只做某事，不切换状态”，得换交互设计
比如把真正要触发的操作绑定在summary内部的一个button[type="button"]上，并用e.stopPropagation()阻止冒泡；或者干脆不用summary，改用div + JS 控制open属性，同时手动补全aria-expanded、aria-controls等可访问性属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
