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

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


当前回答

看看这个答案;在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

其他回答

好吧,这是可能的,其他的答案是完全有效的,但你可以采取暴力的方法,防止鼠标在图像上的默认行为。也就是开始拖动图像。

就像这样:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};  

你可以将以下内容添加到你不想拖拽的每张图片中(在img标签中):

onmousedown="return false;"

如。

img src="Koala.jpg" onmousedown="return false;"

只需添加draggable="false"到你的图像标签:

<img draggable="false" src="image.png">

IE8及以下不支持。

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

我在自己的网站http://www.namdevmatrimony.in/上使用了它 这就像魔法一样!!:)

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

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

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