details连击意外选中文本是因为浏览器将第二次点击识别为双击，触发默认选中行为；必须在summary上显式设置user-select: none及全前缀（含-webkit-touch-callout: none）才能有效阻止。
details连击时为什么会意外选中文本
连击 <summary></summary> 本身不会触发文本选择，但浏览器在快速连续点击时，可能将第二次点击识别为“双击”——而双击默认行为就是选中目标文字。尤其当 <summary></summary> 内是纯文本、未设防时，这个现象在 Chrome 和 Safari 中最明显。
-
user-select: none必须显式加在<summary></summary>上，它不继承，父级<details></details>设了也没用 - 双击选中只发生在可交互文本区域，若
<summary></summary>里嵌了<span></span>或图标，且没统一设禁选，就可能局部被选中 - 移动端长按也会触发系统菜单（“复制/查找”），哪怕 CSS 生效，需额外处理
阻止连击选中的最小可行 CSS 组合
只写 user-select: none 在多数浏览器中会失效，必须补全前缀并覆盖移动端长按行为：
.no-select-summary {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-touch-callout: none;
}
- 别漏掉
-webkit-touch-callout: none：这是 iOS/iPadOS 长按时弹出菜单的唯一有效拦截项 - 不要用
* { user-select: none }全局重置，否则<input>、<button></button>会失去焦点和可操作性 - 如果
<summary></summary>里用了 SVG 或图标字体，确保它们的父容器（即<summary></summary>）也命中该 class
为什么加 onclick="return false" 不推荐
在 <summary></summary> 上写内联 onclick="return false" 看似能拦点击，但它会干扰原生 toggle 行为，导致：
- 键盘操作（空格/回车）失效，破坏可访问性
- 屏幕阅读器无法正确播报展开状态
- 连击问题没解决，反而引入新 bug：用户点一次没反应，再点才触发，体验更差
- 与
disabled属性冲突，而disabled又会让整个<details></details>失去语义支持
真正要盯住的边界情况
最容易被忽略的是内容动态变化后的状态残留：比如连击后 DOM 已更新，但旧文本节点仍保留在内存中，或 summary::marker 伪元素未同步重置样式，导致视觉上像“被选中”。此时仅靠 CSS 不够，得确认：
-
<summary></summary>是否始终是<details></details>的第一个子元素（否则连击可能触发父级事件冒泡） - 是否在 JS 中调用过
element.open = true后又手动插入 HTML，却忘了清空旧节点 - 是否用了第三方 UI 库（如 Bootstrap 或 Tailwind 的插件），它们可能悄悄覆盖了
user-select规则
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
