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

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


当前回答

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

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

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

其他回答

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

由于我的图像是使用ajax创建的,因此在windows.load上不可用。

$("#page").delegate('img', 'dragstart', function(事件){event. preventdefault ();});

通过这种方式,我可以控制哪个部分阻塞行为,它只使用一个事件绑定,它适用于未来ajax创建的图像,而无需做任何事情。

与jQuery新的绑定:

$(' # '页)。on('dragstart', 'img', function(event) {event. preventdefault ();}); (感谢@ialphan)

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

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

IE8及以下不支持。

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

就像这样:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { 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中工作吗