Coordenadas del ratón con Javascript

10/Feb/2008 JavaScript , , , 12 Comentarios
Artículos Programación en Javascript

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.

Vídeos sobre Javascript


12 comentarios en “Coordenadas del ratón con Javascript”

Víctor Cuervo

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).

Víctor Cuervo

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

Víctor Cuervo

dmv

Este ejemplo fue justo lo que necesitaba, muchas gracias ^_^.

Víctor Cuervo

Víctor Cuervo

Nos alegra mucho que te haya servido.

Saludos.

Víctor Cuervo

Víctor Cuervo

@Lluís, me alegro que haya sido de utilidad.

Víctor Cuervo

Víctor Cuervo

@Koldob, Pues ni idea. Pero me parece curioso, voy a ver si me entero de como sería.

Víctor Cuervo

Lluís

Muchísimas gracias por el artículo. Me ha sido de enorme utilidad.

Víctor Cuervo

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.

Víctor Cuervo

Daniel

Super, muchas gracias.

Víctor Cuervo

Jotaele

Yo acabo de probar el ejemplo con IE7 y me ha funcionado perfectamente

Víctor Cuervo

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.

Víctor Cuervo

Juanjo

Esto no sirve para IE

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.