user-select: none 单独无效，因它仅禁文本选中，不阻止图片长按菜单；iOS 需配合 -webkit-touch-callout: none 且二者必须同设于元素，安卓则依赖 touchstart + preventDefault 拦截。
为什么 user-select: none 单独写没用
user-select: none 只管文本能否被高亮选中，对图片长按触发的「保存图像」「分享」等原生菜单完全不生效。iOS 真正控制菜单弹出的是 -webkit-touch-callout: none，而安卓微信 X5 内核、华为/小米浏览器基本无视它。所以只加一条 CSS，等于白配。
-webkit-touch-callout: none 的生效条件和限制
这个属性仅在 iOS Safari（及极少数旧版 Android WebView）中起作用，Chrome、Firefox、Edge 完全忽略。它必须和以下两项同时作用于同一元素才可能生效：
-webkit-user-select: noneuser-select: none
常见失效场景包括：
- 父容器设了
user-select: text，子元素的none被继承覆盖 - 图片包裹在
<a href="#">里，部分 iOS 版本仍会触发跳转或菜单 - Vue/React 动态插入的
<img>没及时挂载 class 或内联样式
JS 层必须拦截 touchstart，且不能委托到 document
CSS 在安卓和微信环境基本靠不住，必须用 JS 补防。关键点是：事件监听必须绑定在 <img> 自身，不能委托到 document 或父容器——因为长按菜单在 400–600ms 后才触发，事件流早已结束，委托监听来不及拦截。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
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 中不冒泡，绑在 document 上无效；touchstart 绑错目标（比如绑在父 div 上）也会漏掉。
别碰 pointer-events: none，除非你真不需要任何交互
虽然 pointer-events: none 一加就灵，但它会让图片彻底失去所有指针响应：点击跳转、懒加载触发、手势缩放、轮播切换全部失效。更麻烦的是，部分旧版华为 WebView 存在渲染穿透问题，即使加了该样式，菜单仍可能漏出。
如果图片本身需要点击行为（比如放大、查看详情），这条 CSS 就是自毁式方案。真正要禁长按又保留点击，只能靠上面的 touchstart + preventDefault 组合。
复杂点在于：不同系统、不同内核（尤其是微信 X5）、不同 iOS 版本对同一套规则响应不一致；最容易被忽略的是动态插入内容未同步应用样式或事件监听——这比写错一行 CSS 更常导致失效。
