layui怎么在整个页面中禁止图片被拖拽到桌面及被长按保存-Layui教程-PHP中文网

禁用图片拖拽需同时设置四行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()防抖处理。

layui怎么在整个页面中禁止图片被拖拽到桌面及被长按保存

直接禁用图片拖拽：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] 一起封死，用户无法输入、无法选中文本、光标消失——这不是禁止拖拽，是制造障碍。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

正确做法是显式重置关键元素：

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，若用了全局样式，务必在后续规则中覆盖回来。