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

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


当前回答

为图像设置以下CSS属性:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

其他回答

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

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

IE8及以下不支持。

你可以这样…

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

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

看起来你正在使用jQuery。

$('img').on('dragstart', function(event) { event.preventDefault(); });
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/上使用了它 这就像魔法一样!!:)

从我自己的答案中,只需在图像上添加一个相同大小的完全透明元素。当你调整图片的大小时,一定要调整元素的大小。

这应该适用于大多数浏览器,甚至更老的浏览器。

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