最简单有效的方式是同时设置 draggable="false"、user-drag: none 和 -webkit-user-drag: none；draggable="false" 对普通 div 无效，且 Safari 忽略其对图片的控制，必须靠 CSS 补位，文字内容还需 user-select: none，动态渲染需确保属性样式不被框架剥离，JS 监听 dragstart 可兜底但需注意事件委托与性能。
直接禁止拖拽，最简单有效的方式是给元素加 draggable="false" 属性，并配合 CSS 的 user-drag: none 和 -webkit-user-drag: none —— 但仅靠其中一项在某些浏览器（尤其是 Safari 和旧版 Edge）中可能失效。
为什么 draggable="false" 有时没用？
这个 HTML 属性只对原生可拖拽元素（如 <img>、<a> 带 href 的、<input type="file">）起作用；对普通 <div> 或文本内容，默认本就不能拖，设了也无感。更关键的是：Safari 会忽略 draggable="false" 对图片的控制，必须靠 CSS 补位。
常见错误现象：<img src="x.jpg" draggable="false"> 在 Safari 里依然能拖出图片到桌面或新标签页。
- 必须同时设置
draggable="false"+style="user-drag: none; -webkit-user-drag: none;" - 若元素内含文字（如标题、段落），还需加
user-select: none防止选中后误拖 - React/Vue 等框架中动态渲染时，确保属性和样式都正确绑定，别被框架自动 strip 掉
draggable
CSS 方式：用 user-drag 彻底锁死
user-drag: none 是标准 CSS 属性（目前仅 Firefox 支持），而 -webkit-user-drag: none 是 Chrome/Safari/Edge 的实际生效项。二者缺一不可。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 对单个元素：直接写内联样式
style="-webkit-user-drag: none; user-drag: none;" - 对全局禁拖（比如整个页面不允许拖任何东西）：在
<body>上加该样式，但注意会影响文件上传区域等合法拖拽场景 - 不要只写
pointer-events: none—— 它禁的是点击和 hover，不阻止拖拽行为
JavaScript 补漏：监听 dragstart 并 preventDefault()
当 HTML 和 CSS 方案仍被绕过（例如用户右键保存图片后手动拖拽），可监听 dragstart 事件强制拦截。它比 CSS 更底层，但性能稍重，且需注意事件委托场景。
示例代码（直接作用于图片）：
document.querySelectorAll('img').forEach(img => {
img.addEventListener('dragstart', e => e.preventDefault());
});
注意事项：
- 必须在 DOM 加载完成后绑定，否则找不到元素
- 如果图片是懒加载或动态插入的，要用事件委托（监听父容器的
dragstart，再判断e.target是否为img） - 避免对整个
document监听，否则可能干扰富文本编辑器、画布类应用等需要拖拽的组件
真正要 100% 禁拖，得 HTML 属性、CSS 规则、JS 事件三者配合，尤其不能漏掉 Safari 的 -webkit-user-drag 和动态内容的事件重绑逻辑。
