仅靠 -webkit-touch-callout: none 无法可靠禁用长按保存图片，它只影响iOS Safari呼出菜单时机，且在iOS 13+/Chrome Android 80+中已失效；真正有效需组合使用background-image替代src、user-select:none、-webkit-user-drag:none等多层拦截。
直接说结论：仅靠 -webkit-touch-callout: none 无法可靠禁用长按保存图片，它只影响系统菜单弹出时机，且在多数现代 iOS/Android 浏览器中已失效或被忽略。
为什么 -webkit-touch-callout: none 失效了
这个 CSS 属性本意是禁用 iOS Safari 的「呼出菜单」（比如“复制”“搜索”“翻译”），但它从不控制图片保存行为。iOS 13+ 和 Chrome Android 80+ 后，浏览器明确将「长按图片 → 保存图片」视为独立手势，绕过该样式控制。实测中即使设置了该属性，长按 <img> 仍会弹出「保存图像」选项。
真正起作用的组合方案（移动端适用）
禁用长按保存需多层拦截，单一手段无效。以下措施需配合使用：
- 给图片添加
oncontextmenu="return false"—— 拦截右键/长按上下文菜单（部分 Android 有效） - 设置
onmousedown="return false"+ontouchstart="return false"—— 阻断触摸起点事件（注意：会同时禁用点击） - CSS 层叠遮罩：用透明
<div>盖在图片上，设pointer-events: none（但需确保不影响其他交互） - 关键一步：移除图片的
src，改用background-image+div容器，再配合user-select: none; -webkit-user-drag: none;
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="img-container" style="
background-image: url('photo.jpg');
background-size: cover;
user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
"></div>
必须接受的现实和副作用
所有前端手段都只能增加保存门槛，无法彻底阻止截图或开发者工具抓取。更严重的是：
- 加
ontouchstart="return false"会导致图片区域完全不可点击，onclick失效 - iOS 微信内置浏览器会忽略大部分此类限制，长按仍可保存
- 部分安卓厂商浏览器（如华为、小米）对
-webkit-user-drag: none支持不一致 - 无障碍访问（VoiceOver/TalkBack）可能因此失效，违反 WCAG 基本要求
如果真要防图，服务端水印、动态切片、低分辨率预览才是实际路径；纯前端“禁用长按”本质是幻觉，容易白忙还伤体验。
