结论：阻止图片长按需css与js协同，单靠user-select:none无效；-webkit-touch-callout:none仅ios有效；pointer-events:none虽有效但破坏交互；推荐img上绑定touchstart防抖preventdefault并配合正确css。
直接说结论：不是所有“被屏蔽”都是你干的，很多情况是用户自己关了系统级长按权限，或者页面用了 pointer-events: none、-webkit-touch-callout: none 这类声明，但没配全或配错地方。
为什么加了 user-select: none 还能长按保存图片
user-select: none 只阻止文本选中，对图片长按触发的原生菜单（如“保存图像”“分享”）完全无效。iOS 真正起效的是 -webkit-touch-callout: none，但安卓微信 X5 内核、华为/小米等国产浏览器基本无视它。所以单写这一条，等于白加。
-
-webkit-touch-callout: none在 iOS Safari 上有效，在安卓上多数失效 -
user-select系列属性对图片交互无实质影响 - 全局写
* { user-select: none }会误伤input、textarea、[contenteditable]，必须显式重置：input, textarea, [contenteditable] { -webkit-user-select: auto; user-select: auto; }
pointer-events: none 为什么一禁就灵，但风险极高
这个属性让元素彻底不响应任何指针事件，包括 touchstart，系统收不到长按目标，自然不弹菜单。但它副作用明确：
- 图片无法点击、拖拽、缩放，
onclick和ontouchstart全部失效 - 若图片在轮播组件、懒加载容器或自定义手势区域里，交互直接崩掉
- 部分旧版华为 WebView 存在渲染穿透问题，即使加了该样式，仍可能漏出菜单
真正有效的组合方案：CSS + 事件拦截
只靠 CSS 不稳定，只靠 JS 容易漏事件。实测最稳的是两者叠加，且事件必须绑在 img 本身：
- CSS 层加：
img { -webkit-touch-callout: none; pointer-events: auto; }（注意别写none） - JS 层加
touchstart.preventDefault()，并配合防抖逻辑：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)); - 避免委托监听：
contextmenu在安卓 WebView 中不冒泡；touchstart委托到document上，因长按菜单在 400–600ms 后才触发，事件流早已结束，来不及拦截
替代方案：用背景图或遮罩层，但有硬伤
把 img 换成 div 的 background-image，确实能绕过浏览器对 img 标签的默认长按处理，但带来新问题：
- SEO 友好性归零，
alt、loading="lazy"、宽高比控制全丢失 - Retina 屏需手动提供 2x 图并设
background-size: 50%，否则模糊 - 遮罩层方案（同级加
opacity: 0的div）要求外层必须是div，不能是a或button，否则 z-index 和事件捕获行为不可控
最麻烦的从来不是写几行代码，而是不同机型和内核对同一套规则响应不一致——iOS Safari、安卓微信 X5、华为 Browser、小米快应用 WebView，各自对 touchstart.preventDefault() 的时机容忍度、对 -webkit-touch-callout 的支持程度、甚至对 CSS 层叠顺序的解析都略有差异。上线前必须真机覆盖测试，不能只信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
