禁用从HTML页面拖动图像

2020/10/18 01:41 · javascript ·  · 0评论

我需要在页面上放置图片。我想禁用该图像的拖动。我正在尝试很多事情,但没有帮助。有人可以帮我吗?

我不想将该图像保留为背景图像,因为我正在调整图像的大小。

你可以这样...

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

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

看来您正在使用jQuery。

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

仅CSS解决方案:使用 pointer-events: none

https://developer.mozilla.org/zh-CN/docs/CSS/pointer-events

只需将draggable =“ false”添加到您的图片标签即可:

<img draggable="false" src="image.png">

IE8及以下版本不支持。

window.ondragstart = function() { return false; } 

最简单的跨浏览器解决方案是

<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中工作

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/上使用了它,
就像魔术一样!!!
:)

我尝试了一下,发现这行得通。

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

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

看到这个答案; 在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标签内):

onmousedown="return false;"

例如

img src="Koala.jpg" onmousedown="return false;"

此代码正是您想要的。它可以防止图像拖动,同时允许任何其他取决于事件的操作。

$("img").mousedown(function(e){
    e.preventDefault()
});

直接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>

在所有主流浏览器中均可使用。

由于我的图像是使用ajax创建的,因此在windows.load中不可用。

$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });

通过这种方式,我可以控制哪个部分阻止了该行为,它仅使用一个事件绑定,并且可以用于将来由ajax创建的图像,而无需执行任何操作。

使用jQuery的新on绑定:

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); });
(感谢@ialphan)

<img draggable="false" src="images/testimg1.jpg" alt=""/>

您可以为此使用内联代码

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">

第二个选择是使用外部CSS或页面CSS

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;
}
<img src="http://www.ourkanpur.com/images/logo.png">


在此站点上使用外部CSS正常工作
(单击此处)

很好的解决方案,它有一个与冲突有关的小问题,如果其他js库中的任何其他人有冲突,则只需启用此类冲突即可。

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

希望这可以帮助某人。

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

<body>标签上添加ondragstart="return false"这将禁用图像拖动。但是,如果您还想禁用文本选择,请添加onselectstart="return false"

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

您可能会认为我的解决方案是最好的。大多数答案与IE8之类的旧浏览器不兼容,因为将不支持e.preventDefault()以及ondragstart事件。要实现跨浏览器兼容,您必须阻止该图像的mousemove事件。请参见下面的示例:

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工作

将以下CSS属性设置为图像:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

好吧,这是有可能的,发布的其他答案也很有效,但是您可以采取蛮力手段并防止mousedown图像上的默认行为其中,就是开始拖动图像。

像这样:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};  
document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

在此Plunker中工作http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

jQuery的:

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

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

答案很简单:

<body oncontextmenu="return false"/>-禁用右键单击
<body ondragstart="return false"/>-禁用鼠标拖动
<body ondrop="return false"/>-禁用鼠标放置

我做了这里显示的css属性以及使用以下javascript监视ondragstart:

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

根据我自己的答案,只需在图像上添加相同大小的完全透明的元素。调整图像大小时,请确保调整元素的大小。

这适用于大多数浏览器,甚至更旧的浏览器。

本文地址:http://javascript.askforanswer.com/jinyongconghtmlyemiantuodongtuxiang.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!