禁用图片拖拽需同时设置四行CSS：img { -webkit-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; user-drag: none; }，单靠user-select: none无效；屏蔽长按保存需CSS加-webkit-touch-callout: none与JS绑定touchstart并preventDefault()防抖处理。
直接禁用图片拖拽：CSS 层必须写对这四行
单靠 user-select: none 完全无效，它只阻止文字选中，不影响拖拽手势启动。真正起作用的是 user-drag 系列属性，但它们是非标准的，浏览器支持不一，必须全部写全：
img {
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none;
}注意：user-drag: none 在 Chrome/Firefox/Edge（Chromium）中已基本支持，但 Safari 仍主要依赖 -webkit-user-drag。漏掉任一前缀，就可能在对应浏览器里失效。
移动端长按保存无法仅靠 CSS 屏蔽
iOS 上真正能抑制“长按弹出保存菜单”的是 -webkit-touch-callout: none；安卓（尤其微信 X5、华为/小米 WebView）几乎无视它。更麻烦的是：user-select: none 对长按菜单完全无影响，很多人加了却以为生效了，其实只是心理安慰。
可靠做法是 CSS + JS 协同：
- CSS 中确保
img元素有-webkit-touch-callout: none，且pointer-events: auto（千万别写none，否则点击事件全废） - JS 绑定
touchstart并preventDefault()，且必须绑在img自身，不能委托到document - 加防抖（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));全局设置要小心，别误伤可交互元素
如果写 * { user-select: none } 或 * { -webkit-user-drag: none }，会连 input、textarea、[contenteditable] 一起封死，用户无法输入、无法选中文本、光标消失——这不是禁止拖拽，是制造障碍。
正确做法是显式重置关键元素：
input, textarea, [contenteditable] {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
-webkit-user-drag: auto;
user-drag: auto;
}另外，Layui 表单控件（如 .layui-input）内部也含 input，若用了全局样式，务必在后续规则中覆盖回来。
Layui 弹层内 iframe 图片的特殊处理
layer.open({ type: 2 }) 加载的 iframe 页面，其内部图片不受父页 CSS 控制。你必须在 iframe 的 HTML 里单独注入上述 CSS 和 JS，或通过 content 配置传入已处理好的页面 URL。
常见错误：
- 只在父页加
user-drag，以为能穿透到 iframe —— 不行，跨域或同域都受 DOM 隔离限制 - 给 iframe 元素本身加
draggable="false"—— 这个属性只控制 iframe 是否可被拖出页面，和内部图片无关 - 用
pointer-events: none想一劳永逸 —— 图片立刻失去所有交互（点击、缩放、懒加载回调），轮播、放大镜等组件直接瘫痪
真正可控的边界在于：图片是否在 iframe 内渲染完成、是否绑定事件、CSS 是否随 iframe 文档加载生效。不要试图从外层“越权”控制。
