我需要在我的页面上放一张图片。我要禁用图像的拖拽。我尝试了很多方法,但都无济于事。有人能帮我一下吗?
我不想保留那个图像作为背景图像因为我在调整图像的大小。
我需要在我的页面上放一张图片。我要禁用图像的拖拽。我尝试了很多方法,但都无济于事。有人能帮我一下吗?
我不想保留那个图像作为背景图像因为我在调整图像的大小。
当前回答
为此,您可以使用内联代码
<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(点击这里)
其他回答
很好的解决方案,有个小矛盾, 如果其他人有冲突从其他js库简单启用没有这样的冲突。
var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });
希望这能帮助到一些人。
你可以认为我的解决办法是最好的。大多数答案都不兼容旧的浏览器,如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上测试和运行
我自己也试过,发现这很有效。
$("img").mousedown(function(){
return false;
});
我确信这将禁用所有图像的拖动。不确定它会影响其他东西。
由于我的图像是使用ajax创建的,因此在windows.load上不可用。
$("#page").delegate('img', 'dragstart', function(事件){event. preventdefault ();});
通过这种方式,我可以控制哪个部分阻塞行为,它只使用一个事件绑定,它适用于未来ajax创建的图像,而无需做任何事情。
与jQuery新的绑定:
$(' # '页)。on('dragstart', 'img', function(event) {event. preventdefault ();}); (感谢@ialphan)
直接使用这个:ondragstart="return false;"在你的图像标签。
<img src="http://image-example.png" ondragstart="return false;"/>
如果你有多个图像,用<div>标签包装:
<div ondragstart="return false;">
<img src="image1.png"/>
<img scr="image2.png"/>
</div>
适用于所有主流浏览器。