Pregunta Evitar la selección en HTML


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


75
2018-02-24 12:41


origen


Respuestas:


Las variaciones propietarias de user-select funcionará 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, necesitarás usar unselectable atributo del elemento que desea ser no 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 poner un atributo en la etiqueta de inicio de cada elemento dentro del <div>. Si esto es un problema, podría usar JavaScript para hacer esto recursivamente 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"));

150
2018-02-24 12:45



Parece que la selección de usuario de CSS no evita 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;
    });
});

10
2018-03-25 17:11



yo suelo cancelBubble=true y stopPropagation() en el mouse hacia abajo y mover los controladores.


5
2018-02-24 13:53



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

4
2018-05-22 15:29



¿Tienes algún tipo de imagen transparente que elijas? 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.


1
2018-02-24 12:46