jQuery mousemove(): Detectar el movimiento y posición del ratón

Con la función de jQuery mousemove() podemos detectar el movimiento del ratón en una página web o en un determinado elemento. En este post vamos a ver cómo detectar su movimiento y con la ayuda de otras funciones de jQuery daremos con su posición.

Otras funciones que controlan el puntero del raton son:

Sintaxis de jQuery mousemove()

Vamos a ver la sintaxis de esta función de jQuery extraída de su web oficial:

$(selector).mousemove(funccion)

1	$(selector).mousemove(funccion)

Repaso la sintaxis:

selector (obligatorio): Elemento donde queremos detectar el movimiento.
funcion (opcional): Función callback a ejecutar cuando se detecte el movimiento.

Ejemplo de jQuery mousemove() para detectar el movimiento y posición del ratón

Vamos a ver este ejemplo de mousemove() para detectar el movimiento del ratón y detectar su posición absoluta en la página web, en un elemento y en la parte visible del navegador.

$(document).ready(function(){
   	    $(document).mousemove(function(event){
        	$("#texto").text("Coordenadas en del ratón en la parte visible del navegador: " + event.clientX + ", " + event.clientY);
        	$("#texto2").text("Coordenadas absolutas del ratón en la página actual: " + event.pageX + ", " + event.pageY);
    	});

    	$("#prueba").mousemove(function(event){
    		var x = event.pageX - this.offsetLeft;
    		var y = event.pageY - this.offsetTop;
        	$("#texto3").text("Coordenadas del ratón dentro del elemento: " + x + ", " + y);
    	});
});

$(document).ready(function(){

$(document).mousemove(function(event){

$("#texto").text("Coordenadas en del ratón en la parte visible del navegador: " + event.clientX + ", " + event.clientY);

$("#texto2").text("Coordenadas absolutas del ratón en la página actual: " + event.pageX + ", " + event.pageY);

});

$("#prueba").mousemove(function(event){

var x = event.pageX - this.offsetLeft;

var y = event.pageY - this.offsetTop;

$("#texto3").text("Coordenadas del ratón dentro del elemento: " + x + ", " + y);

});

Os explico el código del primer bloque del código:

Primero detectamos el movimiento del ratón en la página web y mostramos 2 mensajes con la función text().
El primer mensaje muestra la posición del ratón dentro de la ‘parte visible’ de la página web, es decir, la parte de la web en la que estamos en ese momento dando igual la altura de scroll. Esta posición la sacamos con los identificadores clientX y clientY.
El segundo mensaje muestra la posición absoluta del ratón en la página web, dando igual el scroll que hayamos hecho. A mayor scroll vertical mayor valor de altura. Esta posición la sacamos con los identificadores pageX y pageY.

Vamos con el segundo bloque:

Detectamos el movimiento por el elemento con id=»prueba».
Luego sacamos las posiciones X e Y haciendo una sencilla resta matemática:
– event.pageX – this.offsetLeft -> Posición absoluta horizontal del puntero menos la posición absoluta horizontal del elemento.
– event.pageY – this.offsetTop -> Posición absoluta vertical del puntero menos posición absoluta vertical del elemento.
Mostramos las coordenadas con la función text().

Con estos ejemplos sabemos cómo obtener la posición del ratón en los diferentes casos que se nos puedan presentar.