Zapobieganie zaznaczeniu w HTML

Question

Mam div na stronie HTML i za każdym razem, gdy naciśnie mysz i przenieść, pokaże, że "nie można upuścić" kursor jak coś wybiera. Czy istnieje sposób wyłączenia selekcji? Próbowałem wybrać użytkownika CSS bez żadnego sukcesu.

Answer 1

Własne odmiany user-select będzie działać w większości nowoczesnych przeglądarek:

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

dla IE < 10 i Opera, trzeba będzie użyć atrybutu elementu chcesz być Nie można wybrać unselectable. Można ustawić to za pomocą atrybutu w HTML:

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

Niestety ta właściwość nie jest dziedziczona, co oznacza, że ​​trzeba umieścić atrybut w znaczniku początku każdego elementu wewnątrz <div>. Jeśli jest to problem, można zamiast tego użyć JavaScript, aby to zrobić rekursywnie dla potomnych elementu za:

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

Jeżeli masz jakieś przejrzysty obraz, że wybierający? Zwykle podczas przeciągania obrazu pojawia się ikona "cant drop". W przeciwnym razie normalnie wybiera tekst po przeciągnięciu. Jeśli tak, być może będziesz musiał umieścić obraz za wszystkim używając z-index.

Answer 3

Używam cancelBubble=true i stopPropagation() w myszce w dół i przenoszę obsługę.

Answer 4

To wydaje użytkownik-select CSS nie zapobiegają obrazu przeciągnij i upuść ... tak ..

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() wydaje się robić trik (testowany w IE7-9 i 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); 
    }); 
});