Impedire che un'immagine sia trascinabile o selezionabile senza usare JS

Qualcuno conosce un modo per rendere un'immagine non trascinabile e non selezionabile - allo stesso tempo - in Firefox, senza ricorrere a Javascript? Sembra banale, ma ecco il problema:

1) Può essere trascinato ed evidenziato in Firefox:

<img src="...">

2) Quindi aggiungiamo questo, ma l'immagine può ancora essere evidenziata durante il trascinamento:

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

3) Quindi aggiungiamo questo, per risolvere il problema di evidenziazione, ma poi controintuitivamente, l'immagine diventa di nuovo trascinabile. Strano, lo so! Utilizzando FF 16.0.1

<img src="..." draggable="false" style="-moz-user-select: none;">

Quindi, qualcuno sa perché l'aggiunta di "-moz-user-select: none", avrebbe in qualche modo superato e disabilitato "draggable = false"? Ovviamente, webkit funziona come previsto. Non c'è niente là fuori su Internet su questo ... Sarebbe bello se potessimo far luce su questo insieme.

Grazie!!

Modifica: si tratta di evitare che gli elementi dell'interfaccia utente vengano trascinati inavvertitamente e di migliorare l'usabilità, non un tentativo fallace di uno schema di protezione dalla copia :-)

Imposta le seguenti proprietà CSS sull'immagine:

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

Ho dimenticato di condividere la mia soluzione, non sono riuscito a trovare un modo per farlo senza usare JS. Ci sono alcuni casi angolari in cui il CSS suggerito da @Jeffery A Wooden non copre.

Questo è ciò che applico a tutti i miei contenitori dell'interfaccia utente, non è necessario applicare a ciascun elemento poiché si riutilizza su tutti gli elementi figlio.

CSS:

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

JS:

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

Questo era molto più complicato di quanto doveva essere.

Puoi usare la pointer-eventsproprietà nel tuo CSS e impostarla uguale a "nessuna"

img {
    pointer-events: none;
}

Modificato

questo bloccherà (clic) l'evento. Quindi una soluzione migliore sarebbe

<img draggable="false" (dragstart)="false;" class="unselectable">

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

A seconda della situazione, è spesso utile trasformare l'immagine in un'immagine di sfondo di un divCSS.

<div id='my-image'></div>

Quindi nei CSS:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

Vedi questo JSFiddle per un esempio dal vivo con un pulsante e un'opzione di dimensionamento diversa.

Probabilmente potresti semplicemente ricorrere a

<img src="..." style="pointer-events: none;">

Una soluzione generica specialmente per il browser Windows Edge (in quanto -ms-user-select: none; la regola CSS non funziona):

window.ondragstart = function() {return false}

Nota: questo ti consente di evitare di dover aggiungere draggable="false"ogni imgtag quando hai ancora bisogno dell'evento click (cioè non puoi usare pointer-events: none), ma non vuoi che appaia l'immagine dell'icona di trascinamento.

È possibile impostare l'immagine come immagine di sfondo. Poiché risiede in a div, e divè indistruttibile, l'immagine sarà indistruttibile:

<div style="background-image: url("image.jpg");">
</div>

Ho creato un elemento div che ha le stesse dimensioni dell'immagine ed è posizionato sulla parte superiore dell'immagine . Quindi, gli eventi del mouse non vanno all'elemento immagine.