Previene la selezione in HTML

Question

Ho un div su una pagina HTML e ogni volta che premo il mouse e lo sposto, mostrerà che il cursore "non può cadere" come seleziona qualcosa. C'è un modo per disabilitare la selezione? Ho provato CSS user-select con none senza successo.

Answer 1

Le variazioni di proprietà di user-select lavoreranno nella maggior parte dei browser moderni:

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

Per IE < 10 e Opera, è necessario utilizzare l'attributo unselectable dell'elemento che si desidera essere selezionabile. È possibile impostare questo utilizzando un attributo in HTML:

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

Purtroppo questa proprietà non è ereditata, significa che è necessario mettere un attributo nel tag di inizio di ogni elemento all'interno del <div>. Se questo è un problema, si potrebbe invece utilizzare JavaScript per fare questo in modo ricorsivo per i discendenti di un elemento:

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

Hai una sorta di immagine trasparente che la vostra selezione? Solitamente l'icona "non rilascia" appare quando si trascina un'immagine. Altrimenti normalmente seleziona il testo quando si trascina. Se è così potresti dover mettere l'immagine dietro tutto usando z-index.

Answer 3

Io uso cancelBubble=true e stopPropagation() nel mouse in basso e spostare i gestori.

Answer 4

E 'sembrare facile da selezionare CSS non impediscono immagine drag and drop ... così ..

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() sembra fare il trucco (testato in IE7-9 e 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); 
    }); 
});