Coordenadas del ratón con 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.

Crear el formulario

Lo primero que hacemos es crear el formulario. Esto no debería de suponernos muchos problemas:

<form name="coordenadas">
  <input type="text" id="coordenadaX" name="coordenadaX" size="4"/>
  <input type="text" id="coordenadaY" name="coordenadaY" size="4"/>
</form>

Función para obtener coordenadas

Todo el control de las coordenadas y el volcado al formulario lo haremos en el método Javascript coordenadas:

function coordenadas(evento) {
  document.getElementById("coordenadaX").value = evento.clientX;
  document.getElementById("coordenadaY").value = evento.clientY;
}

Detectar el movimiento del ratón

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.

<body onMouseMove="coordenadas(event);">

Propiedades del evento

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.

document.getElementById("coordenadaX").value = evento.clientX;
document.getElementById("coordenadaY").value = evento.clientY;

Vemos que utilizamos el método getElementById para acceder a los campos del formulario.

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Coordenadas del ratón con Javascript

Código explicado paso a paso para saber cómo obtener las Coordenadas del ratón con Javascript de una forma sencilla.

Descargar código