禁用 img 拖拽最有效方式是 ondragstart="return false" 并配合 CSS 的 user-drag: none 和 -webkit-user-drag: none；动态插入的图片需手动补监听。
img 标签默认会触发浏览器拖拽行为
HTML5 中的 user-select: none 或 pointer-events: none —— 这些只影响选中和点击，对拖拽无效。
ondragstart="return false" 是最直接有效的方案
给 ondragstart 事件并返回 false，能阻止拖拽起点触发。这是轻量、兼容性好（IE9+、所有现代浏览器都支持）且不影响图片显示和其它交互的方式。
@@##@@
- 必须写成
ondragstart="return false"，只写ondragstart="false"不生效 - 如果用 JS 动态绑定，记得调用
event.preventDefault()并返回false - 该方式不影响右键菜单，如需禁右键需额外处理
oncontextmenu
全局禁用：CSS + JavaScript 双保险更稳妥
仅靠 ondragstart 在某些场景（比如 img 嵌套在可拖拽容器中）可能被绕过。加一层 CSS 配合 JS 更可靠：
img {
-webkit-user-drag: none;
user-drag: none;
}
-
-webkit-user-drag: none是 Safari / Chrome 旧版私有属性，仍建议保留 -
user-drag: none是标准属性，但目前仅 Firefox 支持（截至 2024） - 纯 CSS 方案无法覆盖所有浏览器，所以仍要搭配
ondragstart使用
注意：background-image 不会触发拖拽
如果图片只是装饰性用途（比如 banner 背景、icon），优先用 CSS background-image 替代 
立即学习“前端免费学习笔记（深入）”；
.hero-banner {
background-image: url("banner.jpg");
background-size: cover;
}
- 适合无语义、不需 alt 文本、不参与 SEO 的图片
- 无法设置
loading="lazy"或响应式sizes/srcset，灵活性下降 - 若需可访问性（如屏幕阅读器识别），仍得用
alt+ondragstart
ondragstart="return false" 加上 user-drag: none 就已覆盖全部主流情况。真正容易被忽略的是：动态插入的图片（比如通过 innerHTML 或 Vue/React 渲染）不会自动继承这些属性，得在插入后手动补上事件监听或 class。
