web-dev-qa-db-fra.com

Empêcher la sélection en HTML

J'ai un div sur une page HTML et chaque fois que j'appuie sur la souris et que je la déplace, cela montrera que le curseur "ne peut pas déposer" comme s'il sélectionne quelque chose. Existe-t-il un moyen de désactiver la sélection? J'ai essayé la sélection d'utilisateur CSS sans succès sans succès.

javascripthtmlselection
78
Tower

Les variantes propriétaires de user-select fonctionnera 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 ne pas être sélectionnable. Vous pouvez le définir à l'aide d'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"));
158
Tim Down

Il semble que la sélection par l'utilisateur CSS n'empêche pas le glisser-déposer de l'image ... alors ..

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;
    });
});
10
molokoloco

J'utilise cancelBubble=true Et stopPropagation() dans la souris vers le bas et déplace les gestionnaires.

5
kennebec

event.preventDefault() semble faire l'affaire (testé dans 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);
    });
});
4
leaf

Avez-vous une sorte d'image transparente que vous sélectionnez? Habituellement, l'icône "ne peut pas tomber" apparaît lorsque vous faites glisser une image. Sinon, il sélectionne normalement le texte lorsque vous faites glisser. Si c'est le cas, vous devrez peut-être mettre l'image derrière tout en utilisant z-index.

1
Michal Ciechan