oncontextmenu="return false"不生效是因为它仅作用于绑定元素及其子元素，且受iframe、Shadow DOM、框架模板、浏览器策略、事件监听器执行顺序等影响；最可靠方式是addEventListener同步调用e.preventDefault()。
oncontextmenu="return false"为什么有时不生效
这个写法本身没问题，但只对绑定的元素及其子元素起作用，且执行时机和浏览器策略会影响结果。比如在 <body oncontextmenu="return false"> 下，<iframe> 内部右键依然会弹菜单——因为 iframe 有自己的 document，得单独对其 contentDocument 绑定。
常见失效场景包括：
- Shadow DOM 中内联属性可能被忽略，必须用
addEventListener+e.preventDefault() - Vue/React 模板里写
@contextmenu="() => false"或 JSX 的onContextMenu={() => false}，框架不解析return false语义，根本不会阻止菜单 - Brave 等现代浏览器已弱化支持该属性，仅靠它无法保证跨浏览器一致性
- 多个同级监听器共存时，若其他脚本也绑了
contextmenu，执行顺序可能导致拦截被跳过
addEventListener('contextmenu') 必须同步调用 preventDefault()
这是目前最可靠的方式，但关键在于：e.preventDefault() 必须在事件回调中**同步执行**，不能延迟、不能依赖条件分支外层包裹，也不能放在异步逻辑里。
错误示范：
立即学习“前端免费学习笔记（深入）”；
element.addEventListener('contextmenu', e => {
setTimeout(() => e.preventDefault(), 0); // 无效，事件流已结束
});
正确写法（带判断）：
document.addEventListener('contextmenu', e => {
if (e.target.matches('img, .no-right-click')) {
e.preventDefault();
}
});
注意点：
- 不要盲目拦截
<input>、<textarea>、<select>，否则会破坏粘贴、拼写检查等基础功能 - 动态插入的元素（如 Vue/React 渲染后）需在挂载后立即绑定，卸载前调用
removeEventListener，否则重复绑定会导致内存泄漏或多次拦截 - 若绑定在
document上，记得排除触发源：if (!e.target.closest('.custom-menu') && !e.target.matches('.trigger'))才能安全关闭自定义菜单
移动端长按没法靠 oncontextmenu 解决
iOS Safari 和 Android Chrome 中，长按几乎不触发 contextmenu 事件，或触发极不稳定，系统菜单（“复制”“搜索”“保存图片”）仍会叠加弹出。
能做的有限兜底措施：
- 给图片加
draggable="false"，减少“保存图片”选项出现概率 - CSS 配合：
-webkit-touch-callout: none（iOS 专用）、user-select: none、-webkit-user-drag: none - 监听
touchstart并preventDefault()可能破坏滚动，仅限画布、拖拽区域等特殊场景谨慎使用
真要兼容移动端，得降级用 touchstart + setTimeout 模拟长按，并配合 CSS 弱化干扰——但永远做不到桌面端那种精准控制。
禁用右键根本防不住内容窃取
所有基于 contextmenu 的拦截都只是前端障眼法：用户禁用 JS 后完全失效；Shift+F10、菜单键、开发者工具、截图工具、录屏软件全都不受影响。
真正敏感的内容（如版权图片、付费文本、内部接口返回数据），必须靠服务端权限控制、水印、分片加载、动态 token 校验来保护。前端禁右键唯一作用是抬高普通用户的复制门槛，别把它当安全方案。
