如何批量禁用项目中所有图片的拖拽功能（Firefox兼容问题）

我太懂这种批量处理却卡到浏览器兼容性的烦恼了！你用的CSS方案在Chrome、Safari这类webkit内核浏览器里没问题，但Firefox对user-drag这类非标准属性支持不佳，所以才会出现依然能拖拽的情况。下面给你两个靠谱的解决方案，完美覆盖Firefox：

方案一：批量添加标准draggable="false"属性 #

这是最直接的标准做法，Firefox完全支持这个HTML属性，而且能一次性搞定所有图片，不用手动逐个修改：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有img标签，批量设置draggable属性
  document.querySelectorAll('img').forEach(img => {
    img.setAttribute('draggable', 'false');
  });
});

如果你的页面有动态加载的图片（比如滚动加载、AJAX加载），可以把这段代码放到图片加载完成的回调里，或者用MutationObserver监听DOM变化来自动处理新添加的图片。

方案二：全局监听拖拽事件并阻止默认行为 #

如果不想修改DOM属性，也可以通过监听全局的dragstart事件，只要触发拖拽的是图片，就阻止默认行为：

document.addEventListener('dragstart', function(e) {
  // 判断触发事件的元素是否是图片
  if (e.target.tagName.toLowerCase() === 'img') {
    e.preventDefault();
  }
}, false);

这个方案的好处是，不管是现有图片还是后续动态添加的图片，都会自动生效，不需要额外处理。

补充：保留原有CSS增强体验 #

你之前写的CSS可以保留，它能防止用户选中图片内容，进一步增强禁用拖拽的体验，只是单独靠它搞不定Firefox的拖拽问题：

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

内容的提问来源于stack exchange，提问作者Kundan