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

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


当前回答

你可以这样…

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

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

看起来你正在使用jQuery。

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

其他回答

这段代码正是您想要的。它可以阻止图像拖动,同时允许依赖于该事件的任何其他操作。

$("img").mousedown(function(e){
    e.preventDefault()
});

为此,您可以使用内联代码

<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(点击这里)

从我自己的答案中,只需在图像上添加一个相同大小的完全透明元素。当你调整图片的大小时,一定要调整元素的大小。

这应该适用于大多数浏览器,甚至更老的浏览器。

<img draggable="false" src="images/testimg1.jpg" alt=""/>

很好的解决方案,有个小矛盾, 如果其他人有冲突从其他js库简单启用没有这样的冲突。

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

希望这能帮助到一些人。