单靠 CSS 无法可靠禁用移动端长按图片保存菜单，必须结合 JS 拦截；-webkit-touch-callout: none 仅 iOS Safari 有效，安卓及微信 X5 内核基本无效；user-select: none 仅禁文字选择，不影响系统对 img 的保存行为识别。
单靠 CSS 无法可靠禁用移动端长按图片弹出的保存菜单，必须配合 JS 事件拦截；-webkit-touch-callout: none 仅对 iOS Safari 有效，安卓和微信 X5 内核基本无视它。
为什么 user-select: none 完全没用？
user-select: none 只阻止文字被选中，不影响系统对图片的语义识别。长按触发“保存图像”是浏览器独立检测 <img> 元素并调用原生菜单的行为，跟是否可选文本毫无关系。现象上：加了该样式，图片照常弹保存菜单；input、textarea 等可编辑元素上设它也会被浏览器直接忽略——这是规范行为，不是 bug。
-webkit-touch-callout: none 在哪些场景下会失效？
这个属性只在 WebKit 内核（iOS Safari、部分旧版 Android WebView）中被识别，Chrome（安卓/桌面）、Firefox、Edge 完全不支持。即使在 iOS 上，也存在多个常见失效点：
- 父容器设置了
user-select: text，子元素的-webkit-touch-callout: none会被继承覆盖 -
<img>包裹在<a href="#">中，href 非空时仍可能触发菜单 - 元素是异步插入的（如 Vue/React 动态渲染），CSS 规则未及时生效
- iOS 13+ 和多数国产浏览器（华为、小米、微信 X5）已将“长按保存”视为独立手势，绕过该 CSS 控制
真正跨平台生效的最小组合方案
必须同时满足三类控制，且顺序和作用域要精准：
立即学习“前端免费学习笔记（深入）”；
- CSS 层：
.prevent-longpress类需包含完整前缀，且不能全局写* { ... }（会误伤 input）：.prevent-longpress { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - HTML 层：避免语义触发，优先用
<div style="background-image: url(...)">替代<img>；若必须用<img>，确保移除alt或设为空字符串（部分安卓浏览器会因alt文本触发菜单） - JS 层：事件必须绑定到
<img>自身，不能委托到 document；需监听touchstart+touchend+touchmove并防抖：const img = document.querySelector('img'); let longPressTimer = null; img.addEventListener('touchstart', (e) => { longPressTimer = setTimeout(() => e.preventDefault(), 600); }); img.addEventListener('touchend', () => clearTimeout(longPressTimer)); img.addEventListener('touchmove', () => clearTimeout(longPressTimer));
所有前端手段都只是提高门槛，截图、录屏、DevTools 查看 network 或 elements 面板依然能拿到原始图片。真正敏感的内容，得靠 canvas 渲染、服务端水印或资源访问权限控制——CSS 和 JS 拦截只是第一道轻量防线，别指望它 100% 奏效。
