user-select: none对图片长按无效，因其仅禁文本选择；需配合-webkit-touch-callout: none、pointer-events: none或ontouchstart.preventDefault()等组合方案。
为什么加了 user-select: none 还能长按保存图片
因为 user-select: none 只管“选中文本”，对图片长按触发的系统菜单（如“保存图像”）基本没用。iOS 上真正起效的是 -webkit-touch-callout: none，但安卓微信 X5 内核会直接忽略它；华为、小米等国产浏览器也常无视该属性。所以单靠 user-select 系列声明，等于没动手。
pointer-events: none 为什么一禁就灵，但又不能乱用
这个属性让元素彻底不参与任何指针事件，包括 touchstart/touchend/mousedown，系统也就收不到“长按目标”，自然不弹菜单。但它副作用明显：
-
pointer-events: none会让图片完全不可点击、不可拖拽、无法绑定onclick或ontouchstart - 如果图片是轮播图组件的一部分，或需支持缩放/下载/自定义长按逻辑，这个方案直接废掉交互
- 某些安卓 WebView（如旧版华为浏览器）即使加了该样式，仍可能因渲染层穿透问题漏出菜单
哪些地方必须显式恢复 user-select: auto
全局写 * { user-select: none } 很方便，但会误伤可编辑区域。以下元素必须单独重置：
-
input和textarea：否则无法聚焦、打字，iOS 尤其明显 -
contenteditable元素（如富文本编辑器容器） - 带
role="textbox"或其他 ARIA 输入语义的元素 - 部分 UI 库中模拟输入行为的 div（比如 Ant Design Mobile 的
InputItem）
推荐写法：input, textarea, [contenteditable], [role="textbox"] { -webkit-user-select: auto; user-select: auto; }
立即学习“前端免费学习笔记（深入）”；
为什么事件监听必须绑在目标元素本身，不能委托
禁用长按菜单最终要靠 touchstart.preventDefault() 或 contextmenu.preventDefault() 拦截，而移动端的 contextmenu 事件在很多安卓 WebView 中根本不会冒泡，委托到 document 上大概率失效。
- 安卓微信 X5 内核中，
contextmenu只在触发元素上触发，且不冒泡 -
touchstart虽然能冒泡，但长按菜单通常在touchstart后约 400–600ms 才唤起，此时事件流早已结束，委托监听来不及拦截 - 实测发现：给
img直接绑定ontouchstart="event.preventDefault()"比用addEventListener委托稳定得多
最保险的做法是：对需要保护的 img 标签，同时加 CSS + 内联事件：<img src="x.jpg" ontouchstart="event.preventDefault()">
真正麻烦的不是加几行 CSS，而是不同机型和内核对同一套规则响应不一致——iOS Safari 认 -webkit-touch-callout，X5 内核只吃 user-select + touchstart.preventDefault()，而华为浏览器可能连后者都要配合遮罩层才稳。别指望一个 class 解决所有问题。
