仅加 user-select: none 不够，因旧浏览器需兼容前缀，且无法阻止长按复制、ctrl+c、右键菜单及开发者工具取文本，还会影响屏幕阅读器无障碍访问。
user-select: none 能让鼠标拖拽、双击无法选中文字，但不能真正“防止复制”——它只是去掉用户最顺手的那条路径。
为什么只加 user-select: none 不够用
现代浏览器对标准语法支持已很好，但仅写 user-select: none 会漏掉旧版 Safari（-webkit-user-select）、Firefox（-moz-user-select）和 IE/旧 Edge（-ms-user-select）。更关键的是：
- 用户长按移动端页面仍可能唤出“复制”菜单（iOS Safari 尤其明显）
- Ctrl+C、右键“复制”、开发者工具里直接取 DOM 文本，全都不受影响
- 屏幕阅读器依赖文本选中朗读，粗暴加在 body 上会破坏无障碍体验
精准作用于目标容器，别碰表单和交互元素
把保护逻辑锁死在内容区，比如 #article-body 或 .protected-text，而不是全局设在 body。同时必须显式放行可交互区域：
-
input、textarea必须重置为user-select: text，否则用户无法输入 -
code、pre块也建议设为user-select: text，方便开发者复制示例代码 - 如果内容含
img或内联svg，一并加上user-select: none，避免图片被意外拖拽选中
配合 JS 封禁关键事件才有点实际效果
纯 CSS 是“礼貌提示”，加 JS 才算设了路障。重点拦截这五个事件：
-
selectstart：阻止鼠标触发选择起点 -
contextmenu：干掉右键菜单（但注意：F12 依然能开 DevTools） -
copy：拦截Ctrl+C/Cmd+C的复制行为 -
dragstart：防止拖拽文本到其他应用 -
mousedown：部分场景下辅助抑制双击选词
示例片段（作用于指定容器）：
const el = document.querySelector('.protected-text');
['selectstart', 'contextmenu', 'copy', 'dragstart', 'mousedown'].forEach(evt =>
el.addEventListener(evt, e => e.preventDefault())
);
移动端和无障碍是容易被跳过的硬约束
iOS Safari 对 user-select: none 支持不稳定，长按后仍可能弹出菜单；而屏幕阅读器（如 VoiceOver）依赖文本可选性来朗读内容，若整段文字不可选，视障用户可能完全无法获取信息。WCAG 明确要求文本内容需保持可访问性，所以：
- 别给整个页面加 user-select: none
- 若内容含关键说明、错误提示或操作指引，优先保留在可选范围内
- 真要强保护，应评估是否该用服务端渲染 + 水印 + 权限控制替代前端“防复制”这种徒劳手段
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
