我需要在我的页面上放一张图片。我要禁用图像的拖拽。我尝试了很多方法,但都无济于事。有人能帮我一下吗?

我不想保留那个图像作为背景图像因为我在调整图像的大小。


当前回答

你可以认为我的解决办法是最好的。大多数答案都不兼容旧的浏览器,如IE8,因为e.c preventdefault()不支持以及ondragstart事件。要做到跨浏览器兼容,你必须阻止鼠标移动事件为这张图片。请看下面的例子:

jQuery

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

没有jQuery

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

甚至可以在IE8上测试和运行

其他回答

看看这个答案;在Chrome和Safari中,你可以使用以下样式禁用默认拖拽:

-webkit-user-drag: auto | element | none;

您可以尝试用户选择Firefox和IE(10+):

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

我自己也试过,发现这很有效。

$("img").mousedown(function(){
    return false;
});

我确信这将禁用所有图像的拖动。不确定它会影响其他东西。

你可以这样…

document.getElementById('my-image').ondragstart = function() { return false; };

看到它工作(或者不工作)

看起来你正在使用jQuery。

$('img').on('dragstart', function(event) { event.preventDefault(); });

最简单的跨浏览器解决方案是

<img draggable="false" ondragstart="return false;" src="..." />

问题

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;
}

是它不能在firefox中工作吗

这段代码正是您想要的。它可以阻止图像拖动,同时允许依赖于该事件的任何其他操作。

$("img").mousedown(function(e){
    e.preventDefault()
});