Impedir selección en HTML

Question

Tengo un div en una página HTML y cada vez que presiono el mouse y lo muevo, se muestra que el cursor "no se puede soltar" como si selecciona algo. ¿Hay alguna manera de desactivar la selección? Traté de CSS user-select con ninguno sin éxito.

Answer 1

Las variaciones de propiedad de user-select trabajarán en la mayoría de los navegadores modernos:

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

para IE y Opera < 10, que tendrá que utilizar el atributo unselectable del elemento que desea ser seleccionable. Puede hacer esto usando un atributo en HTML:

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

Por desgracia, esta propiedad no es hereditaria, lo que significa que tiene que poner un atributo en la etiqueta de inicio de cada elemento dentro de la <div>. Si esto es un problema, en su lugar podría usar JavaScript para hacer esto de forma recursiva para los descendientes de 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

¿Posee algún tipo de imagen transparente que su selección? Por lo general, el ícono "no puede caer" aparece cuando arrastra una imagen. De lo contrario, normalmente selecciona texto cuando se arrastra. Si es así, puede que tenga que poner la imagen detrás de todo utilizando z-index.

Answer 3

Utilizo cancelBubble=true y stopPropagation() con el mouse hacia abajo y muevo los controladores.

Answer 4

Es parecer CSS user-select no impiden que arrastre la imagen y soltar ... así ..

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() parece que hacer el truco (probado en IE7-9 y 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); 
    }); 
});