user-select: none 是最可靠、最主流的禁用文本选中方案，需配合 -webkit-、-moz-、-ms- 前缀确保兼容性，但对 、 等表单元素无效，须单独重置为 text 并加 !important。
user-select: none 是最可靠、最主流的方案，CSS 优先于 JavaScript，且兼容性已覆盖所有现代浏览器（Chrome 54+、Firefox 69+、Safari 15.4+、Edge 79+）。用 JS 拦截 selectstart 或设 onselectstart 只是补救手段，且在部分场景下会失效。
用 CSS 全局禁用选中（推荐）
直接在 styles.css 或 <style></style> 块中写：
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
注意三点：
-
*选择器会影响所有元素，包括<input>和<textarea></textarea>—— 如果页面有可编辑字段，必须单独重置：input, textarea { user-select: text; } -
-moz-none是 Firefox 旧私有值，已废弃；现在统一用none即可 - 不要只写
user-select: none而忽略前缀——虽然 Chrome/Firefox/Safari 当前都支持无前缀版本，但 Electron、某些 WebView 或老版 iOS Safari 仍依赖-webkit-user-select
为什么不能只靠 JavaScript 拦截 selectstart
document.addEventListener('selectstart', e => e.preventDefault()) 看似简单，但存在明显缺陷：
- 仅阻止鼠标拖选和双击，对键盘操作（如 Shift+→ 逐字扩展选区）无效
- 若用户先选中再触发事件（比如快速双击），可能漏拦截
- 若 CSS 已设
user-select: none，该事件根本不会触发——JS 成了冗余层 - 在 Shadow DOM 内部或 iframe 中需单独绑定，无法跨上下文自动生效
input 和 textarea 需要特殊处理
禁用全局选中后，<input type="text"> 里的文字也会被锁死，导致无法光标定位、无法编辑。正确做法是分层控制：
* { user-select: none; }
input, textarea, [contenteditable] {
user-select: text !important;
}
关键点：
- 必须用
!important覆盖通配符规则，否则input仍继承none -
[contenteditable]用于富文本区域，同样需要放行 - 如果只想禁用某段文字（比如版权说明），更稳妥的是只给容器加类：
.no-select { user-select: none; }，避免影响全局交互
调试时发现文字还能选中？检查这三处
常见失效原因不是代码写错，而是被更高优先级规则覆盖或遗漏：
- CSS 文件未正确加载，或
<link>标签位置在 body 后面，导致样式未生效 - 某个组件库（如 Ant Design、Element Plus）自带
user-select: text并用了!important，压过了你的规则 - 页面内联样式（
style="user-select: text"）或 JS 动态插入的 style 标签，优先级高于外部 CSS
真遇到顽固情况，打开开发者工具，在 Elements 面板里右键目标文字 → “Break on” → “attribute modifications”，看是否有脚本在运行时强行改了 user-select。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
