html无法真正防止文字被复制，前端手段仅提高门槛；需用全前缀user-select、条件拦截copy/contextmenu事件，禁用pointer-events需谨慎，服务端权限才是唯一可靠防线。
HTML 本身不能真正让文字“无法被选中复制”，所有前端手段都只是提高门槛——用户关 JS、删样式、查 Elements 面板或执行 document.body.innerText 就能拿到全部文本。如果你仍需设置，关键不是“防住”，而是用对组合、避开常见坑。
user-select 必须写全前缀才生效
只写 user-select: none 在旧版 Chrome、Safari、Firefox 里大概率无效。必须同时声明：
-
-webkit-user-select: none（Chrome/Safari/Edge） -
-moz-user-select: none（Firefox） -
-ms-user-select: none（IE/旧 Edge） -
user-select: none（标准写法，但单独用不保险）
它只阻止鼠标拖选和双击选词，不影响 Ctrl+C；而且对 <input>、<textarea></textarea> 或 contenteditable="true" 元素，浏览器会自动忽略该样式——这是为了保障基本可用性。
copy 事件拦截要放过可编辑区域
直接对 document 绑定 copy 并调用 e.preventDefault()，会导致所有输入框无法复制粘贴，体验极差。正确做法是判断焦点元素：
document.addEventListener('copy', e => {
const active = document.activeElement;
if (!active.matches('input, textarea, [contenteditable="true"]')) {
e.preventDefault();
}
});
常见错误：
- 漏判
[contenteditable="true"]，富文本编辑器一复制就失效 - 用
e.target判断而非document.activeElement，焦点在 input 但点击空白处时误拦 - 没考虑移动端 Safari —— 它对
copy事件支持不稳定，部分机型根本不触发
contextmenu 拦截不能无差别全局禁用
禁右键后，用户无法在链接上“在新标签页打开”，也无法在图片上“查看原图”，影响可访问性和 SEO。更稳妥的是条件拦截：
document.addEventListener('contextmenu', e => {
// 只禁非交互元素的右键
if (!e.target.matches('a, button, input, textarea, select, [contenteditable]')) {
e.preventDefault();
}
});
oncontextmenu="return false" 这种内联写法已被 React/Vue 等现代框架废弃，且无法动态控制范围，容易误伤。
pointer-events: none 是危险操作
有人试图用 pointer-events: none 一劳永逸地禁掉所有交互，但它会同时禁用按钮、链接、输入框的点击和聚焦，除非你显式给这些元素设回 pointer-events: auto。实际项目中，它比 user-select 更容易引发功能断裂，慎用。
真正容易被忽略的点是：所有这些限制在开发者工具里几秒就能绕过，而服务端权限控制才是唯一可靠防线。前端做的，只是让普通用户不随手复制，而不是让有心人复制不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
