我需要在我的页面上放一张图片。我要禁用图像的拖拽。我尝试了很多方法,但都无济于事。有人能帮我一下吗?
我不想保留那个图像作为背景图像因为我在调整图像的大小。
我需要在我的页面上放一张图片。我要禁用图像的拖拽。我尝试了很多方法,但都无济于事。有人能帮我一下吗?
我不想保留那个图像作为背景图像因为我在调整图像的大小。
当前回答
为图像设置以下CSS属性:
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
其他回答
这段代码正是您想要的。它可以阻止图像拖动,同时允许依赖于该事件的任何其他操作。
$("img").mousedown(function(e){
e.preventDefault()
});
你可以将以下内容添加到你不想拖拽的每张图片中(在img标签中):
onmousedown="return false;"
如。
img src="Koala.jpg" onmousedown="return false;"
这是用JQuery实现的一种优雅方式
$("body").on('mousedown','img',function(e){
e.stopPropagation();
e.preventDefault();
});
on函数向选定的元素攻击一个或多个事件的事件处理程序函数
document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
e.preventDefault();
});
工作在这个Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml
你可以认为我的解决办法是最好的。大多数答案都不兼容旧的浏览器,如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上测试和运行