Verhindern Sie die Auswahl in HTML

Ich habe ein Div auf einer HTML-Seite und jedes Mal, wenn ich die Maus drücke und bewege, wird angezeigt, dass der Cursor nicht fallen gelassen werden kann, als würde er etwas auswählen. Gibt es eine Möglichkeit, die Auswahl zu deaktivieren? Ich habe versucht, CSS User-Select ohne Erfolg ohne Erfolg.

Die proprietären Varianten von user-selectfunktionieren in den meisten modernen Browsern:

*.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;
}

Für IE <10 und Opera müssen Sie das unselectableAttribut des Elements verwenden, dessen Auswahl Sie aufheben möchten. Sie können dies mithilfe eines Attributs in HTML festlegen:

<div id="foo" unselectable="on" class="unselectable">...</div>

Leider wird diese Eigenschaft nicht vererbt, was bedeutet, dass Sie ein Attribut in das Start-Tag jedes Elements innerhalb von einfügen müssen <div>. Wenn dies ein Problem ist, können Sie stattdessen JavaScript verwenden, um dies rekursiv für die Nachkommen eines Elements durchzuführen:

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

Es scheint, dass die CSS-Benutzerauswahl das Ziehen und Ablegen von Bildern nicht verhindert ... also ..

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

Ich benutze cancelBubble=trueund stopPropagation()in der Maus nach unten und bewege Handler.

event.preventDefault() scheint den Trick zu tun (getestet in IE7-9 und 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);
    });
});

Haben Sie ein transparentes Bild, das Sie auswählen? Normalerweise wird das Symbol "Kann nicht fallen gelassen" angezeigt, wenn Sie ein Bild ziehen. Andernfalls wird normalerweise beim Ziehen Text ausgewählt. In diesem Fall müssen Sie das Bild möglicherweise mithilfe des Z-Index hinter alles stellen.