user-select: none 仅禁用文本选中，不阻止右键、双击或影响焦点与可访问性；适合标签页标题、图标文字等纯展示内容，禁用按钮、输入框提示及可排序表头；需兼容旧版Safari时加 -webkit- 前缀。
直接设 user-select: none 能禁用选中，但别只加这一句——它不阻止右键菜单、不屏蔽双击、也不影响焦点和可访问性，盲目使用反而让表单控件或按钮变“假死”。
哪些元素加 user-select: none 真有用
适合纯展示型静态内容，比如标签页标题、图标文字、卡片上的状态徽标。这些地方用户本来就不该复制，加了能避免误操作。
- 按钮文字、输入框内提示文字（
placeholder）不要加——会干扰键盘焦点和屏幕阅读器识别 - 表格列头如果支持排序，加了会让视觉反馈断连（比如点击后没高亮变化）
- React/Vue 组件里用内联样式写
style={{ userSelect: 'none' }}时，注意 SSR 渲染时可能被忽略，得补上全局 class
user-select: none 在不同浏览器的兼容表现
Chrome/Firefox/Edge 16+ 和 Safari 14.1+ 都支持标准写法；Safari 14.0 及更早需加 -webkit-user-select: none 前缀。
- 旧版 iOS Safari（input 和
textarea内部文本无效，哪怕父级设了也没用 - Firefox 中，设在
body上会连地址栏拖拽都禁掉（极少见，但测试时容易漏） - 不要指望它防爬虫——源码照看，选中禁了也能右键“查看网页源代码”
禁选中文本但保留交互功能的正确姿势
单纯禁选常是为了防止误触，但真正要保的是点击、聚焦、键盘导航这些行为。这时候得配合其他属性一起用。
- 给按钮加
user-select: none同时，确保没意外加上pointer-events: none（后者会让 click 事件完全失效） - 若元素本身是
contenteditable="true"，user-select: none会被忽略——编辑态优先级更高 - 想彻底禁掉所有文本交互（包括复制、拖拽、右键），得额外监听
contextmenu、selectstart并preventDefault()，但代价是破坏可访问性
最麻烦的其实是混合场景：比如一个带图标的按钮，图标用伪元素生成，文字要禁选，但图标又要响应点击。这时候得拆开控制——文字层设 user-select: none，图标层单独绑定事件，稍不留神就出现点击区域错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
