Na maioria dos navegadores, isso pode ser alcançado usando variações proprietárias na user-select
propriedade CSS , originalmente propostas e depois abandonadas no CSS 3 e agora propostas no nível 4 da UI do CSS :
*.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in Internet Explorer 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
Para Internet Explorer <10 e Opera <15, você precisará usar o unselectable
atributo do elemento que você deseja que não seja selecionado. Você pode definir isso usando um atributo em HTML:
<div id="foo" unselectable="on" class="unselectable">...</div>
Infelizmente, essa propriedade não é herdada, o que significa que você deve colocar um atributo na tag de início de cada elemento dentro do <div>
. Se isso for um problema, você poderá usar o JavaScript para fazer isso recursivamente para os descendentes de um elemento:
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
Atualização 30 de abril de 2014 : Esse percurso de árvore precisa ser executado novamente sempre que um novo elemento é adicionado à árvore, mas parece que, a partir de um comentário de @Han, é possível evitar isso adicionando um mousedown
manipulador de eventos que define unselectable
o destino do evento. Consulte http://jsbin.com/yagekiji/1 para obter detalhes.
Isso ainda não cobre todas as possibilidades. Embora seja impossível iniciar seleções em elementos não selecionáveis, em alguns navegadores (Internet Explorer e Firefox, por exemplo), ainda é impossível impedir seleções que iniciam antes e terminam após o elemento não selecionável sem tornar todo o documento não selecionável.