Existe uma maneira de tornar uma DIV não selecionável?

Aqui estão algumas perguntas interessantes sobre CSS para você!

Eu tenho uma área de texto com um plano de fundo transparente sobrepondo algum texto que eu gostaria de usar como uma espécie de marca d'água. O texto é grande e ocupa a maior parte da área de texto. Parece bom, o problema é que, quando o usuário clica na área de texto, às vezes seleciona o texto da marca d'água. Quero que o texto da marca d'água nunca seja selecionável. Eu esperava que, se algo fosse mais baixo no índice z, não seria selecionável, mas os navegadores não parecem se importar com as camadas do índice z ao selecionar itens. Existe um truque ou maneira de fazê-lo para que este DIV nunca seja selecionável?

Eu escrevi uma extensão simples do jQuery para desativar a seleção há algum tempo: Desativando a seleção no jQuery . Você pode invocá-lo através$('.button').disableSelection();

Como alternativa, usando CSS (cross-browser):

.button {
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
} 

O código CSS a seguir funciona em um navegador quase moderno:

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Para o IE, você deve usar JS ou inserir atributo na tag html.

<div id="foo" unselectable="on" class="unselectable">...</div>

Apenas atualizando a resposta original e muito votada do aleemb com algumas adições ao css.

Usamos a seguinte combinação:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Recebemos a sugestão de adicionar a entrada webkit-touch em:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

Abr 2015: Apenas atualizando minha própria resposta com uma variação que pode ser útil. Se você precisar tornar o DIV selecionável / não selecionável em tempo real e desejar usar o Modernizr , o seguinte funcionará perfeitamente em javascript:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

Como Johannes já sugeriu, uma imagem de plano de fundo é provavelmente a melhor maneira de conseguir isso apenas no CSS.

Uma solução JavaScript também teria que afetar o "dragstart" para ser eficaz em todos os navegadores populares.

JavaScript:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

Rico

Você pode usar pointer-events: none;no seu CSS

div {
  pointer-events: none;
}

você pode tentar isso:

<div onselectstart="return false">your text</div>

Uma simples imagem de plano de fundo para a área de texto não seria suficiente?

Os navegadores WebKit (por exemplo, Google Chrome e Safari) têm uma solução CSS semelhante à Mozilla-user-select: none da Mozilla

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

Também no IOS, se você quiser se livrar das sobreposições cinza semitransparentes que aparecem no toque, adicione css:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

Usar

onselectstart = "return false"

impede a cópia do seu conteúdo.

Certifique-se de definir a posição explicitamente como absoluta ou relativa para que o z-index funcione para a seleção. Eu tive um problema semelhante e isso resolveu para mim.

Não tem certeza do seu caso de uso, mas você pode torná-lo arrastável.