Zapobieganie możliwości przeciągania lub zaznaczania obrazu bez użycia JS

Czy ktoś wie, jak sprawić, by obraz nie był przeciągany i nie można go było jednocześnie wybrać w przeglądarce Firefox, bez uciekania się do JavaScript? Wydaje się trywialne, ale oto problem:

1. Można przeciągać i zaznaczać w przeglądarce Firefox:

2. Dodajemy więc to, ale obraz nadal może być podświetlony podczas przeciągania:

3. Dodajemy więc to, aby rozwiązać problem z podświetlaniem, ale potem, wbrew intuicji , obraz znów staje się przeciągalny. Wiem, dziwne! Korzystanie z FF 16.0.1

Więc czy ktoś wie, dlaczego dodawanie -moz-user-select: none, miałoby w jakiś sposób przebić i wyłączyć draggable=false? Oczywiście webkit działa zgodnie z oczekiwaniami. W Interwebach nie ma nic na ten temat ... Byłoby wspaniale, gdybyśmy mogli razem rzucić trochę światła na to.

Edycja: Chodzi o to, aby zapobiec nieumyślnemu przeciągnięciu elementów interfejsu użytkownika i poprawić użyteczność - a nie jakąś kiepską próbę schematu ochrony przed kopiowaniem.

Ustaw następujące właściwości CSS na obraz:

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

Zapomniałem udostępnić swoje rozwiązanie, nie mogłem znaleźć sposobu na zrobienie tego bez użycia JS. Są pewne narożne przypadki, w których sugerowany CSS @Jeffery A Wooden po prostu nie obejmuje.

To jest to, co stosuję do wszystkich moich kontenerów UI, nie ma potrzeby stosowania do każdego elementu, ponieważ ponownie wykorzystuje wszystkie elementy podrzędne.

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

To było o wiele bardziej skomplikowane, niż było to konieczne.

Możesz użyć tej pointer-eventswłaściwości w swoim CSS i ustawić ją na „none”

img {
    pointer-events: none;
}

Edytowano

spowoduje to zablokowanie (kliknięcie) zdarzenia. Więc lepsze byłoby rozwiązanie

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

W zależności od sytuacji często pomocne jest ustawienie obrazu jako tła w divCSS.

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

Następnie w CSS:

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

Zobacz ten JSFiddle, aby zobaczyć przykład na żywo z przyciskiem i inną opcją zmiany rozmiaru.

Prawdopodobnie możesz po prostu uciec się do tego

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

Ogólne rozwiązanie specjalnie dla przeglądarki Windows Edge (jako -ms-user-select: none; reguła CSS nie działa):

window.ondragstart = function() {return false}

Uwaga: dzięki temu nie musisz dodawać draggable="false"do każdego imgtagu, gdy nadal potrzebujesz zdarzenia kliknięcia (tj. Nie możesz go użyćpointer-events: none ), ale nie chcesz, aby pojawił się obraz ikony przeciągania.

Utworzyłem element div , który ma taki sam rozmiar jak obraz i jest umieszczony na górze obrazu . Wtedy zdarzenia myszy nie przechodzą do elementu obrazu.

Możesz ustawić obraz jako obraz tła. Ponieważ znajduje się on w a div, a divplik jest niemożliwy do przecięcia, obraz nie będzie można przesuwać:

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