Empêcher la sélection en HTML

Question

J'ai un div sur une page HTML et chaque fois que j'appuie sur la souris et que je le déplace, le curseur "can't drop" s'affiche comme s'il sélectionnait quelque chose. Existe-t-il un moyen de désactiver la sélection ? J'ai essayé CSS user-select avec none sans succès.

Answer 1

Les variantes exclusives 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'option unselectable de l'élément que vous souhaitez rendre non sélectionnable. Vous pouvez définir ce paramètre à 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 placer un attribut dans la balise de début de chaque élément à l'intérieur de la balise <div> . Si cela pose un problème, vous pouvez utiliser JavaScript pour effectuer cette opération de manière 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"));

Answer 2

Il semble que le CSS user-select n'empêche pas le drag and drop des images... donc...

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

Answer 3

J'utilise cancelBubble=true et stopPropagetion() dans les gestionnaires d'abaissement et de déplacement de la souris.

Answer 4

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

Answer 5

Avez-vous une sorte d'image transparente que vous sélectionnez ? En général, l'icône "cant drop" apparaît lorsque vous faites glisser une image. Sinon, le texte est normalement sélectionné lorsque vous le faites glisser. Si c'est le cas, il se peut que vous deviez placer l'image derrière tout le reste en utilisant le z-index.