真正起效的最小兼容组合是：-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> 的光标定位，导致用户无法输入。应该只作用于图片容器或具体 <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="background-image: url(...)">；若必须用<img>，确保移除alt属性（部分安卓浏览器靠它触发菜单） - JS 层：只在目标元素上监听
touchstart和contextmenu，并调用e.preventDefault()，不要挂到document或body上，否则滚动和输入框聚焦会异常
复杂点在于：所有这些手段都只是提高门槛，不能阻止截图、录屏或 DevTools 查看 network 请求。真正要防图，得从服务端做权限控制或用 canvas 渲染 + 水印叠加。
