如果你真的需要使用拖动事件，并且不能设置draggable=false，你可以分配一个备用鬼图像。所以只需要像这样分配一个空白的png:

    $('#img').bind({
        dragstart: function(e) {
            var dragIcon = document.createElement('img');
            dragIcon.src = 'blank.png';
            dragIcon.width = 100;
            e.dataTransfer.setDragImage(dragIcon, -10, -10);
        }
    });

这将在所有浏览器中禁用拖拽图像，同时保留其他事件，如单击和悬停。只要HTML5、JS或CSS可用，就可以使用。

<img draggable="false" onmousedown="return false" style="user-drag: none" />

如果你确信用户将拥有JS，你只需要使用JS属性，等等。要获得更大的灵活性，请查看ondragstart, onselectstart和一些WebKit点击/触摸CSS。

我想你可以改变你的

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

成一个

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

当Firefox不欣赏你的draggable属性(当设置为false时)或没有你的用户拖动CSS规则在你的链接/锚或图像元素:

如果你想要保持指针事件不变，你可以使用big guns来处理MDN setDragImage中描述的“从拖动目标(dragstart事件被触发的元素)生成的半透明图像”。简单的使用方法:

if (/(firefox)/i.test(navigator.userAgent)) {
  document.querySelector('.my-non-draggable').addEventListener('dragstart',
    e => e.preventDefault()
  );
  // or jQuery: $('.my-non-draggable').on('dragstart', e => e.preventDefault());
}

在Firefox上测试:删除和放回图像工作!而且在执行过程中也是透明的。例如,

$('.imageContainerClass').mousedown(function() {
    var id = $(this).attr('id');
    $('#'+id).remove();
    $('#'+id).append('Image tag code');
});

编辑:奇怪的是，这只适用于IE和Firefox。我还在每张图片上添加了draggable = false。Chrome和Safari浏览器仍然是个幽灵。

编辑2:背景图像的解决方案确实是最好的。唯一的微妙之处在于，每当背景图像被改变时，background-size属性都必须重新定义!从我的角度看是这样的。更好的是，我在IE下的普通img标签有一个问题，IE无法调整图像的大小。现在，图像有了正确的尺寸。简单:

$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');

此外，或许可以考虑以下因素:

background-Repeat:no-repeat;
background-Position: center center;

这里有一个比添加空事件侦听器更简单的解决方案。 只需设置指针事件:none到你的图像。如果你仍然需要它是可点击的，在它周围添加一个容器来触发事件。