根本原因是浏览器对可交互图片的默认行为，iOS Safari和Android Chrome均在长按500–800ms后触发原生菜单；正确拦截需用touchstart/touchend/touchmove配合setTimeout同步preventDefault()，禁用user-select或pointer-events无效。
移动端长按图片触发原生菜单的根本原因
这是浏览器默认行为，不是 bug。iOS Safari 和 Android Chrome 都会在 <img> 上长按（约 500–800ms）后弹出「保存图片」「复制图片」等菜单，本质是浏览器对可交互媒体元素的内置响应。
关键点在于：只要图片是可选中、可操作的（比如没被禁用用户选择），且未显式阻止上下文事件，这个菜单就大概率出现。
用 user-select: none + pointer-events: none 组合无效？
单独设 user-select: none 只禁文字选中，不影响长按菜单；pointer-events: none 会直接让图片无法响应任何点击/长按，连自定义点击逻辑都失效——这在需要点击跳转或缩放的场景里就是硬伤。
正确做法是保留交互能力，只拦截触发菜单的那个事件阶段：
立即学习“前端免费学习笔记（深入）”；
-
oncontextmenu在桌面端有效，但移动端多数浏览器不触发（尤其 iOS） -
touchstart+setTimeout检测长按时长，再preventDefault()是最可靠路径 - 必须同时监听
touchmove，否则手指轻微滑动就会误判为长按
实操：用 touchstart/touchend 精准拦截长按
核心逻辑是“按下后计时，抬起前清除，超时则阻止默认行为”。注意不能只靠 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); // 手指移动即取消
});
补充说明：
- 600ms 是经验值，iOS 通常 700ms 左右触发菜单，设低一点更稳妥
- 必须加
touchmove监听，否则用户想滑动页面却意外触发拦截 - 如果图片外层有
overflow: scroll容器，需确保该容器也允许 touch 事件冒泡
兼容性与边界情况提醒
iOS 16.4+ 对 preventDefault() 在 touchstart 中的调用更严格：必须在事件处理函数同步执行，异步（如 Promise.then）或延迟（如 setTimeout 内）调用会失效。
所以别写成：
touchstart = () => setTimeout(() => e.preventDefault(), 10); // ❌ iOS 16.4+ 不生效
而应：
touchstart = (e) => {
if (isLongPressPending) e.preventDefault(); // ✅ 同步判断 + 同步 prevent
};
真正麻烦的是微信内置浏览器（X5 内核），它有自己的长按策略，部分版本无视 preventDefault()。这时只能退回到视觉降级方案：用 background-image 替代 <img> 标签——因为背景图不会触发原生菜单，但代价是失去 alt、SEO 和图片懒加载能力。
长按菜单不是样式问题，是平台级交互契约。能绕开的只有时机和事件流，没有一劳永逸的 CSS 属性。
