Verhindern Sie die Auswahl in HTML

82

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.

javascript html selection

— Turm
quelle

165

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

— Tim Down
quelle

Es ist nicht ausgewählt, wird aber dennoch in die Zwischenablage kopiert (gemäß der MDC-Spezifikation unter goo.gl/5P8uH )

— ithkuil

@ithkuil: Interessant. Sieht so aus, als wäre -moz-nonees der richtige Weg. Ich werde meine Antwort ändern.

— Tim Down

In Firefox 5 -moz-nonescheint von Firebug nicht automatisch none-moz-user-select: none

— vervollständigt

@Lekensteyn: Beide arbeiten, um eine Auswahl zu verhindern, aber es gibt fiktiv einen Unterschied: developer.mozilla.org/en/CSS/-moz-user-select . Folgendes scheint dies in Firefox 5 jedoch nicht zu sichern : jsfiddle.net/vhwJ5/2 .

— Tim Down

Ich bin mir ziemlich sicher, dass es user-selectnur um Text und keine anderen Elemente geht

— Oldboy

10

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

— Molokoloco
quelle

Sie können den Selektor "img" verwenden, aber seien Sie vorsichtig mit "event.preventDefault ();" weil keine anderen Ereignisse, die mit "mousedown" verbunden sind, auf Ihrer Seite auf sie wirken ...

— molokoloco

5

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

— kennebec
quelle

2

Was mich gepackt hat, war, dass Sie es sowohl in der Maus nach unten als auch in den Bewegungshandlern benötigen , nicht nur in der Bewegungshandler!

— Matthew Schinckel

4

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

— Blatt
quelle

Vielen Dank dafür, habe eine Weile nach dem richtigen Weg gesucht, um eine

— Auswahlliste

1

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.

— Michal Ciechan
quelle