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

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


当前回答

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/上使用了它 这就像魔法一样!!:)

其他回答

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

工作在这个Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

我不知道这里的答案是否对每个人都有帮助,但这里有一个简单的内联CSS技巧,它肯定会帮助你在HTML页面上禁用拖拽和选择文本。

在<body>标签上添加ondragstart="return false"。这将禁用拖拽图像。但如果你也想禁用文本选择,那么添加onselectstart="return false"。

代码如下所示:<body ondragstart="return false" onselectstart="return false">

答案很简单:

<body oncontextmenu="return false"/> -禁用右键单击 <body ondragstart="return false"/> -禁用鼠标拖动 <body ondrop="return false"/> -禁用鼠标下落

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

onmousedown="return false;"

如。

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

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

<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中工作吗