En este ejemplo vamos a ver como podemos conocer las coordenadas del ratón con Javascript. Para ello, el ejemplo consistirá en volcar sobre dos campos de entrada de un formulario los valores de las coordenadas X,Y donde se encuentra posicionado el puntero del ratón.
Lo primero que hacemos es crear el formulario. Esto no debería de suponernos muchos problemas:
Todo el control de las coordenadas y el volcado al formulario lo haremos en el método Javascript coordenadas:
function coordenadas(event) {...}Dicho método lo lanzaremos cuando se produzca el evento onMouseMove. Es decir, cada vez que movamos el ratón. Para ello, la invocación la hacemos desde la etiqueta BODY. Hay que tener en cuenta que el parámetro de este método es event. Es decir el evento que se está produciendo (movimiento del ratón). Dicho evento llevará la información relativa a las coordenadas del ratón.
Si nos centramos en el contenido del método coordenadas, vemos que la información de las coordenadas del ratón está en las variables event.clientX y event.clientY. Es por ello que el código será tan sencillo como volcar el valor de dichas coordenadas a los campos del formulario.
Vemos que utilizamos el método getElementById para acceder a los campos del formulario.
Javier Romero
Un cordial saludo desarrolladores, se que ha pasado tiempo, espero que alguien lea y me puedan ayudar. Estoy programando una animación con el movimiento del mouse, el problema es que este método, usar el evento de movimiento del mouse consume muchos cálculos de CPU, no se si dependa de la pc, con el navegador google chrome.
Solo basta con mover el mover el mouse de lado a lado en por unos 10 segundos –en esta misma pagina– y ya me pone el cpu a 100%. Esto me sucede con el evento mouse moved, dudo que sea mi código, pues también lo probé en esta pagina, y esta pagina no tiene animaciones, las animaciones ni siquiera me consumen tantos recursos como escuchar este evento.
Dicho esto, quisiera saber si existe alguna alternativa mas barata a nivel de CPU, como podría obtener las coordenadas del mouse cada cierta frecuencia, en lugar de cada vez que mueve (ejemplo, usar un interval y recuperar las coordenadas del puntero mouse cada 1s).
blas
hola , me intereso el articulo.
Les planteo lo siguiente, quiero conectar un mouse a un celular que tiene la pantalla negra por rotura. y me interesa saber, en mi pc, cual es la coordenada en que esta posicionado.
partiendo de la posicion extrema x=0 y=0
el mouse podria ser inaklambrico via bluetooth, por lo que planteo que el celular se conecte al mouse via conector otg y una netbook intercepte la señal del mouse via bluetooh.
Creen que fuera posiblre?
Gracias
dmv
Este ejemplo fue justo lo que necesitaba, muchas gracias ^_^.
Víctor Cuervo
Nos alegra mucho que te haya servido.
Saludos.
Víctor Cuervo
@Lluís, me alegro que haya sido de utilidad.
Víctor Cuervo
@Koldob, Pues ni idea. Pero me parece curioso, voy a ver si me entero de como sería.
Lluís
Muchísimas gracias por el artículo. Me ha sido de enorme utilidad.
Koldob
Me parece muy interesante y sencillo, yo quisiera aplicarlo a varios ratones conectados al PC.
Los ratones están conectados a distintas USB,cómo debo modificar el código?
Muchas gracias.
Daniel
Super, muchas gracias.
Jotaele
Yo acabo de probar el ejemplo con IE7 y me ha funcionado perfectamente
Carlos Coloch Camacho Hedz.
Estuvo bueno este codigo, pero las coordenadas para un gráfico es un aproximado, con esto pude iniciar para asignar coordenadas a un archivo grafico, prueba y corrección.
Gracias.
Juanjo
Esto no sirve para IE