真正起效的最小兼容组合是:-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;需避免全局设置,仅作用于图片容器或img元素。

直接加 user-select: none 不够,必须配齐前缀组合
单独写 user-select: none 在 Android Chrome、微信 X5 内核、华为/小米浏览器里基本无效。真正起效的最小兼容组合是:
-webkit-user-select: none-moz-user-select: none-ms-user-select: noneuser-select: none
注意:不要用 * { ... } 全局设置——会干掉 <input> 和 <textarea></textarea> 的光标定位,导致用户无法输入。应该只作用于图片容器或具体 <img> 元素。
-webkit-touch-callout: none 单独用基本没用
这个属性在 iOS 13+ 和大多数安卓浏览器中已失效,仅对旧版 iOS Safari 有微弱效果。它不控制「保存图像」动作本身,只影响菜单弹出时机;而且一旦父元素设置了 user-select: text,子元素的 -webkit-touch-callout: none 就会被继承覆盖。别把它当主力方案。
用 pointer-events: none 要小心副作用
这个确实能快速禁掉长按菜单,但它同时会让 onclick、ontouchend、@click 全部失效。如果你需要点击跳转、缩放预览或自定义长按逻辑(比如拖拽、蓄力),就不能用它。真要用,得额外包裹一层可交互容器,把业务逻辑挪到外层处理。
推荐组合:CSS + HTML 替换 + 局部事件拦截
最稳的跨平台做法是三层叠加:
- CSS 层:
-webkit-user-select: none等全套 user-select 前缀 +-webkit-user-drag: none - HTML 层:不用
<img>,改用<div style="max-width:90%">;若必须用 <code><img>,确保移除alt属性(部分安卓浏览器靠它触发菜单) - JS 层:只在目标元素上监听
touchstart和contextmenu,并调用e.preventDefault(),不要挂到document或body上,否则滚动和输入框聚焦会异常
复杂点在于:所有这些手段都只是提高门槛,不能阻止截图、录屏或 DevTools 查看 network 请求。真正要防图,得从服务端做权限控制或用 canvas 渲染 + 水印叠加。











