javascript - Deaktiver draing av et bilde fra en HTML-side

Jeg trenger å sette et bilde på siden min. Jeg vil deaktivere dra-funksjonen for det bildet. Jeg har prøvd mange ting, men det hjelper ikke. Kan noen hjelpe meg?

Jeg vil ikke beholde det bildet som bakgrunnsbilde fordi jeg endrer størrelsen på bildet.

Svar #1

Du kan like dette...

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

Se det fungere (eller ikke fungere, rettere sagt)

Det ser ut til at du bruker jQuery.

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

Svar #2

Kun CSS-løsning: bruk pointer-events: none

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

Svar #3

bare legg til draggable="false" i bildetagen din:

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

IE8 og eldre støtter det derimot ikke.

Svar #4

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

Svar #5

den enkleste løsningen for tversgående nettleserstøtte er

<img draggable="false" ondragstart="return false;" src="..." />

problem med

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;
}

er at det ikke fungerer i Firefox

Svar #6

Jeg prøvde selv og fant ut at dette fungerer.

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

Jeg er sikker på at dette deaktiverer draing av alle bildene. Ikke sikker på om det påvirker noe annet.

Svar #7

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;
}

Jeg brukte det på nettstedet mitt på http://www.namdevmatrimony.in/ Det fungerer som magi!!! :)

Svar #8

Du kan bruke inline-kode for dette

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

Og det andre alternativet er å bruke ekstern eller på-siden 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">

Begge fungerer riktig Jeg bruker ekstern CSS på dette nettstedet (Klikk her)

Svar #9

Se dette svaret; i Chrome og Safari kan du bruke følgende stil for å deaktivere standard dra-funksjon:

-webkit-user-drag: auto | element | none;

Du kan prøve user-select for Firefox og IE(10+):

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

Svar #10

Du kan legge til følgende til hvert bilde du ikke vil skal være draggable, (inne i img-taggen):

onmousedown="return false;"

f.eks.

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

Svar #11

Bruk dette direkte: ondragstart="return false;" i bildemerket ditt.

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

Hvis du har flere bilder, innpakket i en <div>-tag:

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

Fungerer i alle store nettlesere.

Svar #12

Denne koden gjør akkurat det du vil. Den forhindrer at bildet dras samtidig som den tillater alle andre handlinger som avhenger av hendelsen.

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

Relaterte artikler