禁用从HTML页面中拖动图像

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

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

当前回答

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

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

2013-01-21 05:11:23

其他回答

这是用JQuery实现的一种优雅方式

$("body").on('mousedown','img',function(e){
    e.stopPropagation();
    e.preventDefault();
});

on函数向选定的元素攻击一个或多个事件的事件处理程序函数

2021-02-20 13:13:59

你可以这样…

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

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

看起来你正在使用jQuery。

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

2010-11-18 05:21:55

我不知道这里的答案是否对每个人都有帮助，但这里有一个简单的内联CSS技巧，它肯定会帮助你在HTML页面上禁用拖拽和选择文本。

在<body>标签上添加ondragstart="return false"。这将禁用拖拽图像。但如果你也想禁用文本选择，那么添加onselectstart="return false"。

代码如下所示:<body ondragstart="return false" onselectstart="return false">

2014-11-17 10:21:53

直接使用这个: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>

适用于所有主流浏览器。

2015-09-02 23:30:00

你可以认为我的解决办法是最好的。大多数答案都不兼容旧的浏览器，如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上测试和运行

2015-07-20 10:12:53

禁用从HTML页面中拖动图像

推荐文章

最新文章

标签