Impedindo que uma imagem seja arrastável ou selecionável sem usar JS

Alguém sabe como fazer uma imagem não arrastável e não selecionável - ao mesmo tempo - no Firefox, sem recorrer ao Javascript? Parece trivial, mas aqui está o problema:

1) Pode ser arrastado e destacado no Firefox:

<img src="...">

2) Adicionamos isso, mas a imagem ainda pode ser destacada enquanto arrasta:

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

3) Então, adicionamos isso, para corrigir o problema de destaque, mas, de maneira contrária, a imagem se torna arrastável novamente. Estranho, eu sei! Usando o FF 16.0.1

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

Então, alguém sabe por que adicionar "-moz-user-select: none" de alguma forma superaria e desativaria "draggable = false"? Obviamente, o webkit funciona como esperado. Não há nada nas Interwebs sobre isso ... Seria ótimo se pudéssemos esclarecer isso juntos.

Obrigado!!

Editar: trata-se de impedir que os elementos da interface do usuário sejam arrastados inadvertidamente e de melhorar a usabilidade - não uma tentativa fraca de um esquema de proteção contra cópia :-)

Defina as seguintes propriedades CSS para a imagem:

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

Eu esqueci de compartilhar minha solução, não consegui encontrar uma maneira de fazer isso sem usar o JS. Existem alguns casos em que o CSS sugerido pelo @Jeffery A Wooden simplesmente não cobre.

É isso que aplico a todos os meus contêineres da interface do usuário, sem necessidade de aplicar a cada elemento, pois ele recusa em todos os elementos filho.

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

Isso foi muito mais complicado do que precisava ser.

Você pode usar a pointer-eventspropriedade em seu CSS e defini-la como 'none'

img {
    pointer-events: none;
}

Editado

isso irá bloquear (clique) evento. Então, uma solução melhor seria

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

Dependendo da situação, geralmente é útil tornar a imagem uma imagem de segundo plano de um divcom CSS.

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

Em seguida, em CSS:

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

Veja este JSFiddle para um exemplo ao vivo com um botão e uma opção de dimensionamento diferente.

Você provavelmente poderia apenas recorrer a

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

Uma solução genérica especialmente para o navegador Windows Edge (como a regra -ms-user-select: none; a regra CSS não funciona):

window.ondragstart = function() {return false}

Nota: Isso pode poupar a necessidade de adicionar draggable="false"a cada imgtag quando você ainda precisa do evento click (ou seja, não pode usá-lo pointer-events: none), mas não deseja que a imagem do ícone de arrastar apareça.

Você pode definir a imagem como imagem de fundo. Como reside em a dive divé irreconhecível, a imagem ficará irreconhecível:

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

Criei um elemento div que tem o mesmo tamanho da imagem e está posicionado na parte superior da imagem . Em seguida, os eventos do mouse não vão para o elemento de imagem.