我需要在我的页面上放一张图片。我要禁用图像的拖拽。我尝试了很多方法，但都无济于事。有人能帮我一下吗?
我不想保留那个图像作为背景图像因为我在调整图像的大小。
当前回答
看看这个答案;在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
其他回答
document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
e.preventDefault();
});
工作在这个Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml
我自己也试过，发现这很有效。
$("img").mousedown(function(){
return false;
});
我确信这将禁用所有图像的拖动。不确定它会影响其他东西。
为此，您可以使用内联代码
<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">
第二个选择是使用外部或页面上的css
img { -moz-user-select:没有; -webkit-user-select:没有; -ms-user-select:没有; 用户选择:没有; -webkit-user-drag:没有; user-drag:没有; -webkit-touch-callout:没有; ｝ < img src = " http://www.ourkanpur.com/images/logo.png " >
两者都正常工作 我在这个网站上使用外部css(点击这里)
jQuery:
$('body').on('dragstart drop', function(e){
e.preventDefault();
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中工作吗
