直接加 user-select: none 会失效，因其仅禁用鼠标拖选，无法拦截 Ctrl+C、右键菜单、移动端长按、DevTools 复制等；且富文本编辑器常重置该样式。真正有效需分区 CSS 防护 + oncopy/preventDefault + clipboard API 水印 + 服务端动态渲染 + CSP 策略。
为什么直接加 user-select: none 会失效
很多商品详情页加了 user-select: none 后，用户依然能复制文字——不是 CSS 写错了，而是它只禁用鼠标拖选，不拦截 Ctrl+C、右键菜单、长按选中（移动端）、甚至 DevTools 里直接右键“Copy element”或“Copy text”。更关键的是，如果详情页用了富文本编辑器（如 Quill、Tiptap）或 Markdown 渲染，它们内部会重置 user-select 样式，导致你写的全局规则被覆盖。
oncopy 事件拦截必须配合 preventDefault() 和剪贴板篡改
单纯监听 copy 事件并 return false 在现代浏览器中已不可靠（尤其 Chrome 95+），必须用 event.preventDefault() + 主动写入剪贴板内容。否则用户打开 DevTools → Console → 执行 navigator.clipboard.writeText('随便什么') 就绕过了。
- 只在商品正文容器（如
div#detail-content）上绑定，避免影响输入框、搜索栏、SKU选择器等交互元素 - 拦截后可插入版权水印：
navigator.clipboard.writeText(originalText + '\n\n© 2026 XX旗舰店，禁止转载') - 注意兼容性：iOS Safari 不支持
navigator.clipboard.writeText，需 fallback 到document.execCommand('copy')（已废弃但仍有用）
防右键和防拖拽要分区域控制，别锁死整个 body
电商详情页常见错误是给 body 加 oncontextmenu="return false" 和 -webkit-user-drag: none，结果导致图片放大镜失效、SKU图片无法拖拽切换、甚至轮播图手势失灵。真实场景里，只有商品描述段落、参数表格、服务承诺文案需要防护，而所有交互控件必须放行。
- 用 CSS 选择器精准作用于内容区：
#detail-desc, .product-params-table { -webkit-user-select: none; user-select: none; } - JS 右键拦截也应限定范围：
document.getElementById('detail-desc').addEventListener('contextmenu', e => e.preventDefault()) - 禁用图片拖拽时，只针对
img标签加draggable="false"，别用全局* { -webkit-user-drag: none }，否则会干扰自定义拖拽组件
真正起效的组合：服务端动态渲染 + 前端分区防护 + CSP 策略
纯前端防复制就像用纸糊门——能挡风，但一脚就踹开。商品详情页若含价格、库存、优惠券逻辑，这些敏感信息绝不能裸露在 HTML 源码里。必须把关键字段（如 price、stock_status）从服务端 API 动态注入，并启用 Content-Security-Policy 阻止外域脚本读取 DOM。
- 服务端返回的 HTML 中，商品描述字段留空或占位，由 JS 调用
/api/product/detail?id=123获取并渲染，避免静态 HTML 被爬虫整页抓走 - 设置响应头：
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123';，再给内联脚本加nonce="abc123"，防止恶意脚本注入后遍历document.body.innerText - 禁用 F12 查看源码无意义，但可结合
console.clear()+debugger检测（仅辅助威慑），重点还是不让敏感数据出现在初始 HTML 中
最常被忽略的一点：防复制效果必须在 iOS Safari 和 Android Chrome 上实机验证——长按选中触发路径不同，CSS 前缀支持也不一致，光在桌面 Chrome 测通没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
