2012-01-20 15 views
9

En Chrome (estoy usando la versión 16.0.912.75 m en Win 7) Me parece que no importa lo que tenga un cursor establecido, tan pronto como mantenga presionado el botón izquierdo del mouse y mueva cursor luego el tipo de cursor cambia a text (incluso cuando no hay texto en ninguna parte de la página).Error de Chrome? El cursor cambia con el mouse hacia abajo + mover

¿Esto es un error? ¿Alguien sabe cómo evitarlo ya que está haciendo que mi herramienta de arrastrar y soltar parezca un poco tonta?

jsFiddle: http://jsfiddle.net/KJfbs/

Editar

Como contestada por @davgothic a continuación, añadiendo -webkit-user-select: none; se solucionará el problema cuando no hay ningún texto. Sin embargo, si colocamos el elemento de manera absoluta y colocamos texto detrás, el problema persiste.

jsFiddle: http://jsfiddle.net/KJfbs/2/

Respuesta

10

Trate de añadir -webkit-user-select: none; a la CSS para ese elemento para evitar la selección de texto.

Ejemplo: http://jsfiddle.net/KJfbs/1/

Personalmente añadiría también estos ...

-webkit-user-select: none; 
-khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    -o-user-select: none; 
     user-select: none; 

... para la compatibilidad con navegadores.

+1

+1 - gracias, que trabaja para el ejemplo en mi pregunta. Lamentablemente, esto no parece funcionar cuando div se coloca absolutamente por encima del texto. ¿Tienes alguna idea de por qué esto podría ser? –

+0

No estoy muy seguro, como último recurso, puede establecer '-webkit-user-select: none;' en el elemento que contiene el texto. Sin embargo, el usuario perdería la capacidad de seleccionar ese texto. [Aquí hay un ejemplo] (http://jsfiddle.net/KJfbs/3/). –

+0

Sí, supongo que es una opción. Gracias. Esperaré para ver si alguien puede ofrecerme asesoramiento sobre mi edición antes de aceptar su respuesta. –

0

Creo que con -webkit-user-select: none; el problema persiste si coloca algo más en la página. Por ejemplo: http://jsfiddle.net/KJfbs/237/

De todas formas creo jQuery preventDefault resuelve el problema en todo caso: http://jsfiddle.net/KJfbs/241/

preventDefault evita el comportamiento por defecto que es el cambio al texto del cursor.
Luego puedo controlar y poner cualquier cursor que desee: $ (this) .css ("cursor", "wait");

JQUERY:

$(function(){ 
    $('#lime').mousedown(function(e) { 
     e.preventDefault(); 
     $(this).css("cursor","wait"); 
    }).on('mouseup mouseleave', function() { 
     $(this).css("cursor","default"); 
    }); 
}); 

HTML:

<div id="lime"></div> 
<p>Lorem ipsum dolor sit amet</p> 

CSS:

#lime { 
    background-color: lime; 
    height: 100px; width: 300px; 
    cursor: wait; 
    position: absolute; 
    top: 0; left: 0; 
} 
Cuestiones relacionadas