我需要在我的页面上放一张图片。我要禁用图像的拖拽。我尝试了很多方法,但都无济于事。有人能帮我一下吗?
我不想保留那个图像作为背景图像因为我在调整图像的大小。
我需要在我的页面上放一张图片。我要禁用图像的拖拽。我尝试了很多方法,但都无济于事。有人能帮我一下吗?
我不想保留那个图像作为背景图像因为我在调整图像的大小。
当前回答
jQuery:
$('body').on('dragstart drop', function(e){
e.preventDefault();
return false;
});
您可以将主体选择器替换为任何其他容器,以防止子容器被拖放。
其他回答
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;
}
我在自己的网站http://www.namdevmatrimony.in/上使用了它 这就像魔法一样!!:)
你可以认为我的解决办法是最好的。大多数答案都不兼容旧的浏览器,如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上测试和运行
这是用JQuery实现的一种优雅方式
$("body").on('mousedown','img',function(e){
e.stopPropagation();
e.preventDefault();
});
on函数向选定的元素攻击一个或多个事件的事件处理程序函数
看看这个答案;在Chrome和Safari中,你可以使用以下样式禁用默认拖拽:
-webkit-user-drag: auto | element | none;
您可以尝试用户选择Firefox和IE(10+):
-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element
最简单的跨浏览器解决方案是
<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中工作吗