-webkit-touch-callout: none 单独使用无法可靠禁用长按图片菜单，仅在旧版 iOS Safari 有效；现代系统将“长按保存”视为独立手势，绕过该 CSS 控制，需结合 user-select、HTML 替换、事件拦截等多层方案。
-webkit-touch-callout: none 单独设置不能可靠禁用长按图片弹出系统菜单，尤其在 iOS 13+、Android Chrome 80+、微信 X5 内核（安卓）、华为/小米自带浏览器中基本失效。
它只对旧版 iOS Safari 有较稳定效果，且仅影响「呼出菜单」时机，不控制「保存图像」行为本身。现代系统已将长按图片 → 保存视为独立手势，绕过该 CSS 控制。
-webkit-touch-callout: none 为什么经常没反应
- 它只在 WebKit 内核浏览器中被识别（iOS Safari、部分旧 Android WebView），Chrome（桌面/安卓）、Firefox、Edge 完全忽略
- 即使在 iOS 上，若图片包裹在
<a>中且href非空（如href="#"），仍可能触发跳转或菜单 - 不作用于纯文本节点或未渲染完成的动态元素（如 Vue/React 异步插入的
<img>） - 父级设置了
user-select: text会继承覆盖，导致子元素的-webkit-touch-callout: none失效
真正起效的最小组合方案（iOS + Android + 微信通用）
必须同时满足三类控制：
-
CSS 层：阻止选中与菜单触发
-webkit-touch-callout: none-webkit-user-select: none-moz-user-select: none-ms-user-select: noneuser-select: none-webkit-user-drag: none立即学习“前端免费学习笔记（深入）”；
HTML 层：避免语义触发
不用<img src="...">，改用<div style="background-image: url(...)">
若必须用<img>，确保移除alt（部分安卓浏览器会因 alt 触发菜单）并设draggable="false"JS 层：拦截事件流（绑定到目标元素，非 document）
el.addEventListener('touchstart', e => e.preventDefault())el.addEventListener('contextmenu', e => e.preventDefault())
注意：不要在<body>上全局监听touchstart，否则滚动、输入框聚焦都会异常
容易被忽略的副作用和例外场景
-
input和textarea会无视user-select: none，这是浏览器预期行为，不用强行覆盖；但若父容器设了user-select: none，需显式给它们设回user-select: auto - 使用
pointer-events: none虽能快速禁用长按，但也会让onclick、onTouchEnd全部失效，不适用于需要点击跳转或自定义长按逻辑的图片 - 所有前端手段都无法阻止截图、录屏、DevTools 查看 network 或 elements 面板抓图——只能提高保存门槛，不能替代服务端权限控制
真正可靠的方案不是“禁用”，而是把敏感图片从客户端加载改为 canvas 渲染或水印叠加，或由后端控制资源可访问性。
