Dans la plupart des navigateurs, cela peut être réalisé en utilisant des variations propriétaires sur la user-select
propriété CSS , initialement proposées puis abandonnées dans CSS 3 et maintenant proposées dans CSS UI Level 4 :
*.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;
}
Pour Internet Explorer <10 et Opera <15, vous devrez utiliser l' unselectable
attribut de l'élément que vous souhaitez ne pas pouvoir sélectionner. Vous pouvez définir cela en utilisant un attribut en HTML:
<div id="foo" unselectable="on" class="unselectable">...</div>
Malheureusement, cette propriété n'est pas héritée, ce qui signifie que vous devez mettre un attribut dans la balise de début de chaque élément à l'intérieur du <div>
. Si c'est un problème, vous pouvez utiliser à la place JavaScript pour le faire récursivement pour les descendants d'un élément:
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"));
Mise à jour du 30 avril 2014 : cette traversée d'arbre doit être réexécutée chaque fois qu'un nouvel élément est ajouté à l'arborescence, mais il semble d'après un commentaire de @Han qu'il est possible d'éviter cela en ajoutant unmousedown
gestionnaire d'événements qui se positionne unselectable
sur la cible du un événement. Voir http://jsbin.com/yagekiji/1 pour plus de détails.
Cela ne couvre toujours pas toutes les possibilités. Bien qu'il soit impossible d'initier des sélections dans des éléments non sélectionnables, dans certains navigateurs (Internet Explorer et Firefox, par exemple), il est toujours impossible d'empêcher les sélections qui commencent avant et se terminent après l'élément non sélectionnable sans rendre l'ensemble du document non sélectionnable.