Auswahl in HTML verhindern

Question

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 lassen" kann, wie er etwas auswählt. Gibt es eine Möglichkeit, die Auswahl zu deaktivieren? Ich habe versucht, CSS-Benutzer-Auswahl ohne Erfolg.

Answer 1

Die proprietäre Varianten von user-select werden in den meisten modernen Browsern funktionieren:

*.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, können Sie das unselectable Attribut des Elements Sie unselectable sein wollen verwenden müssen. Sie können diese Einstellung ein Attribut in HTML mit:

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

Leider diese Eigenschaft nicht vererbt wird, was bedeutet, müssen Sie innerhalb der <div> ein Attribut in dem Start-Tag jedes Element gesetzt. Wenn dies ein Problem ist, könnten Sie stattdessen JavaScript verwenden, um dies für ein Element Nachkommen rekursiv 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")); 

Answer 2

Haben Sie irgendeine Art von transparentem Bild, das Ihre Auswahl? 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.

Answer 3

Ich benutze cancelBubble=true und in der Maus nach unten und verschieben Handler.

Answer 4

Es ist scheinen CSS user-select nicht Bild per Drag-and-Drop verhindern ... 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; 
    }); 
}); 

Answer 5

event.preventDefault() scheint zu tun Der Trick (getestet in IE7-9 und Chrome):