Frage Auswahl in HTML verhindern


Ich habe ein div auf einer HTML-Seite, und wenn ich die Maus drücke und es bewege, wird es zeigen, dass der Cursor nicht fallen gelassen werden kann, wie es etwas auswählt. Gibt es eine Möglichkeit, die Auswahl zu deaktivieren? Ich habe versucht, CSS-Benutzer-Auswahl ohne Erfolg.


75
2018-02-24 12:41


Ursprung


Antworten:


Die proprietären Variationen von user-select funktioniert 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 den unselectable Attribut des Elements, das nicht auswählbar sein soll. 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 in der <div>. Wenn dies ein Problem ist, können Sie stattdessen JavaScript verwenden, um dies rekursiv für die Nachkommen eines Elements zu tun:

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

150
2018-02-24 12:45



Es scheint, CSS-Benutzer-Auswahl nicht verhindern, dass Bild ziehen und ablegen ... so ..

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
2018-03-25 17:11



ich benutze cancelBubble=true und stopPropagation() in der Maus nach unten und verschieben Sie Handler.


5
2018-02-24 13:53



event.preventDefault() scheint den Trick zu machen (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);
    });
});

4
2018-05-22 15:29



Hast du ein transparentes Bild, das du auswählst? Normalerweise wird das Symbol "Überspringen" angezeigt, wenn Sie ein Bild ziehen. Andernfalls wählt es normalerweise Text, wenn Sie ziehen. Wenn dies der Fall ist, müssen Sie das Bild möglicherweise mit z-index hinter alles stellen.


1
2018-02-24 12:46