禁用从HTML页面中拖动图像

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

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

当前回答

jQuery:

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

您可以将主体选择器替换为任何其他容器，以防止子容器被拖放。

2019-10-29 10:33:06

其他回答

我自己也试过，发现这很有效。

$("img").mousedown(function(){
    return false;
});

我确信这将禁用所有图像的拖动。不确定它会影响其他东西。

2010-11-18 05:34:02

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

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

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

2014-11-17 10:21:53

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

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

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

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

2021-02-20 13:13:59

好吧，这是可能的，其他的答案是完全有效的，但你可以采取暴力的方法，防止鼠标在图像上的默认行为。也就是开始拖动图像。

就像这样:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};

2010-11-18 05:31:15

禁用从HTML页面中拖动图像

推荐文章

最新文章

标签