纯前端“禁止复制+禁右键”本质是障眼法，无法真正保护内容；真安全需服务端控制、水印或权限体系。
user-select: none 能禁选但不防右键；contextmenu 事件能拦右键但绕过极容易——纯前端的“禁止复制+禁右键”本质上是障眼法，不是安全措施。真要保护内容，得靠服务端控制或水印+权限体系。
为什么 oncontextmenu="return false" 失效越来越快
现代浏览器（Chrome ≥ 110、Firefox ≥ 115）对 contextmenu 事件拦截做了策略收紧：用户长按触摸屏、按 Shift+F10、用键盘菜单键（Menu 键）、甚至 DevTools → Elements 面板直接右键，都能绕过该监听。更关键的是，只要禁用 JS 或删掉 script 标签，整个逻辑就归零。
常见错误现象：
- 页面在移动端完全没反应（iOS Safari 不触发
contextmenu） - 用户打开开发者工具后，右键立刻恢复可用
-
event.preventDefault()在某些 iframe 场景下被忽略
user-select: none 的兼容性坑点
这个 CSS 属性确实能阻止鼠标拖选，但它不等于“禁复制”——用户仍可通过 Ctrl+A 全选 + Ctrl+C 复制（尤其在 Firefox 中），或直接从 DevTools 的 Elements 面板里拷贝 innerHTML。
必须写全前缀才覆盖老浏览器：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
注意：-khtml-user-select 已废弃，none 值在部分 Android WebView 中无效；若只给某个 <div> 加，记得也给它的子元素显式继承或重置，否则子节点可能仍可选。
<h3>组合用 JS 拦截时，<code>copy 和 cut 事件怎么写才不漏
仅监听 copy 不够，用户可能用 Ctrl+X 剪切，或通过右键“剪切”菜单触发。必须同时处理：
document.addEventListener('copy', e => e.preventDefault())document.addEventListener('cut', e => e.preventDefault())-
document.addEventListener('dragstart', e => e.preventDefault())（防拖拽另存）
但要注意：这些事件在 contenteditable="true" 元素内默认不冒泡，需单独绑定；且 Safari 对 cut 事件支持不稳定，建议加兜底：oncut="return false" 写在 body 上。
真正起作用的只有服务端水印和权限隔离
前端所有手段都只能提高普通用户的操作门槛。如果你的内容需要实质保护：
- 敏感文本不要直出 HTML，改用 Canvas 渲染文字（字体转路径+动态绘制）
- PDF/图片类文档走带时间戳水印的后端生成服务，每次请求返回唯一标识
- 登录态鉴权 + 接口级限流，让批量抓取成本远高于手动复制
最常被忽略的一点：一旦你用了 user-select: none，屏幕阅读器（如 NVDA、VoiceOver）的焦点导航会异常卡顿——无障碍访问优先级其实高于“防复制”。
