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

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


当前回答

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

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

其他回答

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

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

jQuery:

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

您可以将主体选择器替换为任何其他容器,以防止子容器被拖放。

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

onmousedown="return false;"

如。

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

答案很简单:

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

CSS唯一的解决方案:使用指针事件:none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events