直接在上加oncontextmenu="return false"是最轻量兼容的禁右键方式，但仅防普通用户另存为，无法阻止开发者工具、截图或网络面板获取图片；正确写法必须含return关键字且false为布尔字面量，错误写法如"false"或"event.preventdefault()"均无效。
直接给 <img> 加 oncontextmenu="return false" 能拦住大部分普通用户的右键另存为，但对开发者工具、截图、网络面板完全无效——它只是第一道门槛，不是保险锁。
oncontextmenu="return false" 怎么写才有效
写错一个字符就失效。常见错误包括：oncontextmenu="false"（布尔值不是字符串）、oncontextmenu="event.preventDefault()"（内联属性里访问不到 event 对象）、漏掉 return 关键字。
- ✅ 正确写法：
<img src="photo.jpg" alt="示例图" oncontextmenu="return false"> - ❌ 错误写法：
<img oncontextmenu="false">或<img oncontextmenu="e.preventDefault()"> - 只加在
<img>上比加在更安全：不影响表单输入框右键粘贴、链接右键新标签打开等正常交互
为什么全局监听 contextmenu 有时不管用
因为浏览器对 <img> 的右键事件有优先级处理：某些版本 Safari 和旧 Edge 会先触发元素自身的 oncontextmenu，再冒泡到 document。如果只监听 document，而图片自己没设拦截，就可能漏掉。
- 必须同时判断目标节点：
if (e.target.tagName === 'IMG')（注意是大写的'IMG'，不是'img'） - 要调用
e.preventDefault()，return false在addEventListener里不等价于阻止默认行为 - 移动端长按不触发
contextmenu事件，这个监听对 iOS/Android 完全无效
配合 CSS 防拖拽和选中才完整
禁右键后，用户还能拖拽图片到桌面、或全选页面后“另存为网页”连带保存图片。得补上这两层：
- 加
draggable="false"属性，降低 iOS/Android 长按时出现“保存图片”选项的概率 - CSS 中设置：
img { user-select: none; -webkit-user-drag: none; pointer-events: none; }—— 但注意：pointer-events: none会让图片无法响应点击事件，慎用于可交互图片 - 若图片需点击跳转，改用
user-select: none+-webkit-user-drag: none+ondragstart="return false"组合更稳妥
真正要防的是资源被复用，不是右键动作本身。只要图片 URL 出现在 HTML 源码、Network 面板或 Elements 标签里，任何拦截都形同虚设。高价值图片该走服务端 token 鉴权、CSS background-image 替代、Canvas 动态渲染，而不是靠前端事件绑定硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
