禁用右键菜单需正确使用 oncontextmenu="return false" 或 addEventListener 中调用 e.preventDefault()；内联写法漏 return、框架中误写 oncontextmenu={false}、移动端兼容及可访问性影响均需注意。
oncontextmenu 属性直接返回 false 就能禁用右键菜单
浏览器原生右键菜单由 contextmenu 事件触发，oncontextmenu 是其内联事件处理器。只要它返回 false，事件就会被取消，菜单不会弹出。
常见错误是只写 oncontextmenu="return false" 却忘了加 return —— 没有 return，函数实际返回 undefined，等价于未阻止默认行为。
-
oncontextmenu="return false"✅ 正确（HTML 内联） -
oncontextmenu="false"❌ 不生效（只是字符串，没执行） -
oncontextmenu="event.preventDefault()"❌ 语法错误（内联中不能直接访问event）
addEventListener 绑定时必须调用 preventDefault()
用 JS 脚本绑定更灵活，但要注意：仅 return false 在 addEventListener 中不等价于阻止默认行为，它只停止事件冒泡，不取消菜单。
必须显式调用 event.preventDefault()，且推荐加上 { once: true } 防止重复绑定。
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
}, { once: true });
- 在
iframe或子窗口中拦截，需确保脚本运行在目标文档上下文中 - 若页面动态插入内容（如 SPA 路由切换），需重新绑定或用事件委托
- 某些浏览器（如 Safari 移动版）可能忽略
preventDefault()对contextmenu的拦截
禁用右键菜单 ≠ 防止内容被复制
禁用右键菜单只是移除快捷入口，用户仍可通过 Ctrl+U 查看源码、Ctrl+C 复制文本、开发者工具直接抓取 DOM 或网络请求。
真正敏感的内容（如图片、视频、API 响应）必须靠服务端权限控制、水印、分片加载或 DRM 等手段保护，前端拦截纯属“防君子不防小人”。
- 禁用右键对 SEO、可访问性（如屏幕阅读器右键快捷操作）有负面影响
- 部分企业内网或教育系统会强制启用右键菜单用于辅助功能，强行禁用可能引发兼容性问题
React/Vue 等框架里别直接写 oncontextmenu={false}
JSX 和模板语法中，oncontextmenu 是事件处理 prop，不是 HTML 属性。写成 oncontextmenu={false} 会导致 React 报 warning，Vue 可能静默失败。
正确做法是传一个函数并调用 preventDefault：
function MyComponent() {
const handleContextMenu = (e) => e.preventDefault();
return <div onContextMenu={handleContextMenu}>...</div>;
}
- Vue 模板中用
@contextmenu.prevent是最简写法（.prevent自动调用preventDefault） - SSR 渲染时注意：服务端无
event对象，oncontextmenu处理器只应在客户端挂载后生效
