Empêcher la sélection en HTML
j'ai une div sur une page HTML et chaque fois que j'appuie sur la souris et que je la déplace, elle montre que le curseur" ne peut pas tomber " comme il sélectionne quelque chose. Est-il un moyen de désactiver la sélection? J'ai essayé CSS user-select sans succès.
5 réponses
les variantes propriétaires de user-select fonctionneront dans la plupart des navigateurs modernes:
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
pour IE < 10 et Opera, vous devrez utiliser l'attribut unselectable de l'élément que vous souhaitez être unselectable. Vous pouvez définir ceci 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 pourrait plutôt utiliser JavaScript pour le faire de façon récursive 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"));
Il semble CSS utilisateur-sélectionnez ne pas empêcher l'image de glisser-déposer... si..
HTML:
<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla
CSS:
* {
user-select: none;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
}
::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }
JS:
$(function(){
$('*:[unselectable=on]').mousedown(function(event) {
event.preventDefault();
return false;
});
});
j'utilise cancelBubble=true et stopPropagation() dans la souris et déplacer les gestionnaires.
event.preventDefault() semble faire l'affaire (testé en IE7-9 et Chrome):
jQuery('#slider').on('mousedown', function (e) {
var handler, doc = jQuery(document);
e.preventDefault();
doc.on('mousemove', handler = function (e) {
e.preventDefault();
// refresh your screen here
});
doc.one('mouseup', function (e) {
doc.off('mousemove', handler);
});
});
Avez-vous une sorte d'image transparente de votre sélection? Habituellement, l'icône "déverrouillage" apparaît lorsque vous faites glisser une image. Sinon, il sélectionne normalement texte lorsque vous faites glisser. Si c'est le cas, vous pourriez avoir à mettre l'image derrière tout en utilisant z-index.