我需要在我的頁面上放一張圖片。我想禁止拖動該圖像。我嘗試了很多方法，但是沒有用。有人能幫我嗎？

我不想將該圖像保留為背景圖像，因為我正在調整該圖像的大小。

你可以這樣...

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

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

你好像在用jQuery。

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

僅CSS解決方案:使用指針-事件:無

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

只需將draggable="false "添加到您的圖像標簽中:

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

IE8及以下版本不支持。

最簡單的跨瀏覽器解決方案是

<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").mousedown(function(){
    return false;
});

我確信這將禁用所有圖像的拖動。不確定它是否會影響其他東西。

我在http://www.namdevmatrimony.in/的網站上用過 它像魔法一樣有效！！！:)

您可以為此使用內聯代碼

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

看到這個回答；在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;"

直接用這個:ondragstart = " return false"在您的圖像標簽中。

<img src="http://image-example.png" ondragstart="return false;"/>

如果您有多個圖像，包裝在一個& ltdiv & gt標簽:

<div ondragstart="return false;">
   <img src="image1.png"/>
   <img scr="image2.png"/>
</div>

適用于所有主流瀏覽器。

這段代碼完全符合您的要求。它防止拖動圖像，同時允許依賴于該事件的任何其他操作。

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

因為我的圖片是用ajax創建的，所以在windows.load上不可用。

$("#page ")。delegate('img '，' dragstart '，function(event){ event . prevent default()；});

這樣，我可以控制哪個部分阻止行為，它只使用一個事件綁定，它對未來ajax創建的圖像有效，而無需做任何事情。

jQuery新綁定:

$('#page ')。on('dragstart '，' img '，function(event){ event . prevent default()；}); (感謝@ialphan)

偉大的解決方案，有一個小問題與沖突， 如果其他人有來自其他js庫的沖突，只需像這樣啟用無沖突。

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

希望這能幫到一些人。

我不知道這里的答案是否對每個人都有幫助，但這里有一個簡單的內聯CSS技巧，它肯定會幫助你在HTML頁面上禁止拖動和選擇文本。

在您的& ltbody & gt標記add ondragstart="return false "。這將禁止拖動圖像。但是，如果您還想禁用文本選擇，那么添加onselectstart="return false "。

代碼將如下所示:& ltbody ondragstart = " return false " onselectstart = " return false " & gt。

你可以認為我的解決方案是最好的。大多數答案與IE8等舊瀏覽器不兼容，因為e.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測試和工作

為圖像設置以下CSS屬性:

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

jQuery:

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

您可以將身體選擇器替換為您希望防止子對象被拖放的任何其他容器。

嗯，這是可能的，其他的答案也完全有效，但是你可以采取暴力的方法來阻止鼠標按下圖像的默認行為。也就是開始拖動圖像。

大概是這樣的:

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

在這個普朗克http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml工作

用JQuery做這件事的一種優雅方式

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

on函數將一個或多個事件的事件處理函數附加到所選元素

答案很簡單:

& ltbody oncontext menu = " return false "/& gt；-禁用右鍵單擊 & ltbody ondragstart = " return false "/& gt。-禁用鼠標拖動 & ltbody ondrop="return false"/>。-禁用鼠標拖放

我使用下面的javascript實現了這里顯示的css屬性以及monitor ondragstart:

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

只需使用e.preventDefault()。示例:

純HTML:

<img
  src={item.icon}
  onmousedown={(e) => {
    e.preventDefault()
  }}
/>

反應

<img
  src={item.icon}
  onmousedown={(e) => {
    e.preventDefault()
  }}
/>

從我自己的答案里偷換，只是在圖片上加了一個同樣大小的完全透明的元素。調整圖像大小時，一定要調整元素的大小。

這應該適用于大多數瀏覽器，甚至是舊的瀏覽器。