Evitar la selección en HTML

82

Tengo un div en una página HTML y cada vez que presiono el mouse y lo muevo, mostrará que el cursor "no puede soltar" como si seleccionara algo. ¿Hay alguna forma de desactivar la selección? Probé la selección de usuario de CSS sin éxito.

javascript html selection

— Torre
fuente

166

Las variaciones propietarias de user-selectfuncionará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 <10 y Opera, deberá usar el unselectableatributo del elemento que desea que no sea seleccionable. Puede configurar esto usando un atributo en HTML:

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

Lamentablemente, esta propiedad no se hereda, lo que significa que debe colocar un atributo en la etiqueta de inicio de cada elemento dentro de <div>. Si esto es un problema, puede 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"));

— Tim Down
fuente

no está seleccionado, pero aún se copia al portapapeles (de acuerdo con la especificación MDC en goo.gl/5P8uH )

— ithkuil

@ithkuil: Interesante. Parece que -moz-nonees el camino a seguir. Enmendaré mi respuesta.

— Tim Down

En Firefox 5, -moz-noneparece que Firebug no lo completa automáticamente, aunque sí none: -moz-user-select: none(funciona)

— Lekensteyn

@Lekensteyn: Ambos funcionan para evitar la selección, pero teóricamente hay una diferencia: developer.mozilla.org/en/CSS/-moz-user-select . Sin embargo, lo siguiente no parece respaldar esto en Firefox 5: jsfiddle.net/vhwJ5/2 .

— Tim Down

Estoy bastante seguro de que user-selectsolo trata con texto y ningún otro tipo de elementos

— oldboy

10

Parece que la selección de usuario de CSS no impide que la imagen se arrastre y suelte ... así que ...

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

— molokoloco
fuente

Puede usar el selector "img" pero tenga cuidado con "event.preventDefault ();" porque ningún otro evento asociado con "mousedown" funcionará en ellos en su página ...

— molokoloco

5

Utilizo cancelBubble=truey stopPropagation()en el mouse hacia abajo y muevo manejadores.

— Kennebec
fuente

2

Lo que me enganchó fue que lo necesitas tanto en el mouse hacia abajo como en los controladores de movimiento, ¡no solo en el movimiento!

— Matthew Schinckel

4

event.preventDefault() parece 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);
    });
});

— hoja
fuente

Gracias por esto, busqué por un tiempo la forma correcta de bloquear una lista de I que estaba bloqueando al hacer clic, ya que los valores deshabilitados no se publican ... jaja

— thekevshow

1

¿Tiene algún tipo de imagen transparente que está seleccionando? Por lo general, el icono de "no se puede soltar" aparece cuando arrastra una imagen. De lo contrario, normalmente selecciona texto cuando lo arrastra. Si es así, es posible que tenga que poner la imagen detrás de todo usando z-index.

— Michal Ciechan
fuente