必须同时使用 draggable="false"、-webkit-user-drag: none 和 dragstart 事件拦截才能可靠禁用图片拖拽，因各浏览器对单一方案支持不一，尤其 Safari 会忽略 draggable 属性。
draggable="false" 是必须写的，但只写它不够
现代浏览器里，draggable="false" 是语义最正确、兼容性最好的起点。但它在 Safari 中对 <img> 元素基本无效——图片照拖不误。Chrome 和 Firefox 虽然能响应这个属性，但遇到某些渲染路径（比如 CSS transform 后重绘）也可能失效。所以不能只依赖它。
关键点在于：draggable 是布尔属性，必须显式写成 draggable="false"；写成 draggable 或 draggable="" 等价于 true，反而开启拖拽。
- 对静态 HTML 图片：直接加
draggable="false" - 对 React/Vue 渲染的图片：确保框架没 strip 掉该属性（例如 Vue 3 中需用
v-bind:draggable="false"，而非draggable="false"字面量） - 对懒加载图片（如
loading="lazy"）：插入 DOM 后要立刻补上该属性，或在IntersectionObserver回调中设置
-webkit-user-drag: none 才是真正起效的 CSS 规则
user-drag: none 是标准属性，但目前只有 Firefox 支持；真正跨浏览器生效的是 -webkit-user-drag: none。它直接抑制 WebKit/Blink 内核（Chrome、Safari、Edge）的拖拽手势启动逻辑，比 pointer-events: none 或 user-select: none 更底层。
常见错误是只写 user-select: none，这只能防止选中图片框，不影响拖拽本身；也有人误用 pointer-events: none，结果按钮点击失效、表单无法交互。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法（内联样式，防被覆盖）：
style="-webkit-user-drag: none; user-drag: none;" - 全局控制（慎用）：
body { -webkit-user-drag: none; user-drag: none; }，但会禁用所有合法拖拽区域（如文件上传区、画布工具） - 不要漏掉
user-select: none—— 它虽不防拖拽，但能避免用户选中图片后按 Ctrl+C 触发复制，常被当成“拖拽成功”
dragstart 事件监听是兜底手段，但要注意绑定时机
即使 HTML + CSS 都写了，仍有极少数情况（比如某些 Safari 版本 + 图片在 iframe 中）会绕过前两层防御。dragstart 监听是最底层的拦截方式，调用 e.preventDefault() 可彻底终止拖拽流程。
但这个事件不冒泡，无法用事件委托；且必须等 DOM 就绪后绑定，否则找不到元素。
- 基础写法（适用于静态页面）：
document.querySelectorAll('img').forEach(img => { img.addEventListener('dragstart', e => e.preventDefault()); }); - 动态图片（AJAX/React）：每次插入新
<img>后手动绑定，或用MutationObserver监听新增节点 - 避免全文档监听：
document.addEventListener('dragstart', ...)会影响富文本编辑器、Canvas 拖拽等正常功能
背景图和 inline SVG 不受 draggable 属性影响
draggable="false" 只对可拖拽的原生元素生效，比如 <img>、带 href 的 <a>、<input type="file">。它对 CSS background-image 完全无效——背景图本来就不能拖，也不需要禁。
而 inline SVG 中的 <image> 元素，虽然结构类似 <img>，但默认不可拖；若被 JS 注入 draggable="true"，才需同样处理。
- 背景图防护：无需任何操作，浏览器不提供拖拽入口
- inline SVG 图片：检查是否被动态设了
draggable="true"，如有则统一加-webkit-user-drag: none - Base64 或 data URL 图片：仍属
<img>，按前述三步处理即可
draggable 的无视，以及动态插入时属性和样式的同步时机。 
