Javascript 禁止从 HTML 页面拖动图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4211909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable dragging an image from an HTML page
提问by User 1034
I need to put an image in my page. I want to disable dragging of that image. I am trying lot of things but no help. Can somebody help me out ?
我需要在我的页面中放置一个图像。我想禁用该图像的拖动。我正在尝试很多事情，但没有帮助。有人可以帮我吗？
I don't want to keep that image as a background-image because I am resizing the image.
我不想将该图像保留为背景图像，因为我正在调整图像大小。
采纳答案by User 1034
I tried myself and found this is working.
我自己尝试过，发现这是有效的。
$("img").mousedown(function(){
return false;
});
I am sure this disables dragging of all the images. Not sure it effects something else.
我确信这会禁用所有图像的拖动。不确定它会影响其他东西。
回答by alex
You can like this...
你可以喜欢这个...
document.getElementById('my-image').ondragstart = function() { return false; };
See it working (or not working, rather)
It seems you are using jQuery.
看来您正在使用 jQuery。
$('img').on('dragstart', function(event) { event.preventDefault(); });
回答by mikhuang
CSS only solution: use pointer-events: none
仅 CSS 解决方案：使用 pointer-events: none
回答by dmo
just add draggable="false" to your image tag:
只需将 draggable="false" 添加到您的图像标签：
<img draggable="false" src="image.png">
IE8 and under doesn't support however.
IE8 及以下不支持。
回答by Ben
window.ondragstart = function() { return false; }
回答by imal hasaranga perera
simplest cross browser solution is
最简单的跨浏览器解决方案是
<img draggable="false" ondragstart="return false;" src="..." />
problem with
有问题
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;
}
is that it is not working in firefox
是它在Firefox中不起作用
回答by Namdev Matrimony
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;
}
I used it on my website at http://www.namdevmatrimony.in/It's works like a magic!!! :)
我在我的网站http://www.namdevmatrimony.in/上使用了它， 它的作用就像魔法一样！！！:)
回答by mhu
See this answer; in Chrome and Safari you can use the following style to disable the default dragging:
看到这个答案; 在 Chrome 和 Safari 中，您可以使用以下样式禁用默认拖动：
-webkit-user-drag: auto | element | none;
You could try user-selectfor Firefox and IE(10+):
您可以尝试针对 Firefox 和 IE(10+) 进行用户选择：
-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element
回答by BOBO
You can add the following to each image you don't want to be draggable, (inside the imgtag):
您可以将以下内容添加到您不想被拖动的每个图像中，（在img标签内）：
onmousedown="return false;"
e.g.
例如
img src="Koala.jpg" onmousedown="return false;"
回答by Robert
This code does exactly what you want. It prevents the image from dragging while allowing any other actions that depend on the event.
此代码完全符合您的要求。它可以防止拖动图像，同时允许任何其他取决于事件的操作。
$("img").mousedown(function(e){
e.preventDefault()
});
