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

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


当前回答

为图像设置以下CSS属性:

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

其他回答

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

就像这样:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = 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(点击这里)

你可以认为我的解决办法是最好的。大多数答案都不兼容旧的浏览器,如IE8,因为e.c preventdefault()不支持以及ondragstart事件。要做到跨浏览器兼容,你必须阻止鼠标移动事件为这张图片。请看下面的例子:

jQuery

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

没有jQuery

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

甚至可以在IE8上测试和运行

你可以这样…

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

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

看起来你正在使用jQuery。

$('img').on('dragstart', function(event) { event.preventDefault(); });

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

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