Método de obtención de la posición actual del ratón con Javascript

A veces, necesitamos obtener la distancia de arrastre de la ventana o el desplazamiento del ratón, en este caso, podemos obtener el resultado deseado mediante el cálculo de la posición del ratón antes y después en la página, a continuación, se presentan varios atributos de eventos:

1、ubicación de coordenadas del área de cliente

　　Los eventos de ratón ocurren en posiciones específicas en la ventana del navegador. Esta información de posición se almacena en las propiedades clientX y clientY del objeto de evento. Sus valores representan las coordenadas horizontales y verticales del puntero del ratón en la ventana del navegador en el momento del evento (sin incluir la distancia de desplazamiento de la página). Como se muestra en la siguiente imagen:

var div = document.getElementById("myDiv"); //Obtener el elemento
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Coordenadas de pantalla: " + event.screenX + " + event.screenY);
});

Nota: entre ellos, EventUtil.on() representa la asociación de eventos al elemento, EventUtil.getEvent(event) representa la obtención del objeto de evento. EventUtil es un objeto de evento personalizado (implementado con JavaScript), que contiene algunos métodos de navegación entre navegadores, la implementación específica, consulte otro artículo <Unos métodos de eventos de navegación entre navegadores>. Si el proyecto utiliza el complemento jQuery, se puede reemplazar con el método correspondiente.

2、ubicación de coordenadas de la página

　　Las propiedades del objeto de evento pageX y pageY, pueden decirte en qué posición del página ocurre el evento. En otras palabras, estas dos propiedades representan la posición del cursor del ratón en la página (equivalente a las coordenadas del ratón en la ventana) + Distancia de desplazamiento de la página).

var div = document.getElementById("myDiv");//Obtener el elemento con id "myDiv"
EventUtil.on(div, "click", function(event){//Asignar el evento click al elemento
 event = EventUtil.getEvent(event);//Obtener el objeto de evento event
 var pageX = event.pageX, pageY = event.pageY;
 if (pageX === undefined){//IE8y versiones anteriores
  pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 }
 if (pageY === undefined){
  pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
 }
 alert("Coordenadas de página: " + pageX + " + pageY);
});

3ubicación de coordenadas de pantalla

　　A través de las propiedades screenX y screenY se puede determinar la información de coordenadas del puntero del ratón en relación con toda la pantalla. Como se muestra en la siguiente imagen:

var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Coordenadas de pantalla: " + event.screenX + " + event.screenY);
});

El artículo se refiere a la tercera edición de 'Programación avanzada en JavaScript'

Gracias por leer, espero que pueda ayudar a todos, gracias por el apoyo a nuestro sitio!