最轻量兼容方式是oncontextmenu="return false"；CSS方案用pointer-events:none+user-select:none但损可访问性；JS全局监听需判断e.target.tagName==='IMG'并阻止冒泡；前端禁右键无法防盗图，须配合服务端鉴权与动态水印。
直接在 ![HTML5如何禁用图片右键_HTML5禁用图片右键方法【防护】]()
oncontextmenu="return false"
这是最轻量、兼容性最好的方式，所有现代浏览器（包括 IE11）都支持。它不依赖 JS 全局监听，只作用于目标图片，不影响页面其他元素的右键行为。
常见错误是写成 oncontextmenu="false" 或 oncontextmenu="event.preventDefault()" —— 前者无效，后者在内联属性里无法访问 event 对象。
@@##@@
用 CSS 的 pointer-events: none 配合 user-select: none
这个方法本质是让图片“不可交互”，不仅禁右键，连拖拽、点击、选中都会失效。适合纯展示型图片（比如背景图、水印图），但会破坏可访问性 —— 屏幕阅读器可能跳过该元素，且键盘焦点也无法到达。
-
pointer-events: none：阻止所有鼠标事件（含右键） -
user-select: none：防止用户误选图片文字（如带文字的 banner 图） - 需配合
display: block或明确宽高，否则部分浏览器可能渲染异常
img.no-rightclick {
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
JS 全局监听 contextmenu 事件并过滤 
适用于需要统一管控、或图片是动态插入的场景（比如 React/Vue 渲染的列表）。注意不能只监听 document，因为某些浏览器（如 Safari）对图片右键会优先触发元素自身事件。
立即学习“前端免费学习笔记（深入）”；
- 必须用
event.target.tagName === 'IMG'判断，而不是nodeName（大小写不一致） - 要加
event.stopPropagation()防止冒泡干扰其他逻辑 - 移动端无效 —— iOS/Android 长按不触发
contextmenu，需额外处理touchstart+ 定时器模拟
document.addEventListener('contextmenu', function (e) {
if (e.target.tagName === 'IMG') {
e.preventDefault();
e.stopPropagation();
}
});
禁右键 ≠ 防盗图，别忽略服务端防护
所有前端手段都可被绕过：禁用 JS、审查元素删属性、抓包下载原图、截图、甚至开发者工具的 Elements 面板里直接复制 src 地址。
真正需要防护的图片（如版权图、付费内容），必须结合：
- 服务端鉴权：图片 URL 带时效 token，或校验
Referer/User-Agent - 动态水印：用 Canvas 在前端绘制不可分离的浮层文字
- 禁止索引：
减少搜索引擎收录
单独靠 oncontextmenu 或 CSS 就以为图片安全了，是典型的技术幻觉。
