Propiedad event.pageX
La propiedad event.pageX contiene
las coordenadas del cursor del ratón en el eje X.
Para determinar las coordenadas también existen las propiedades
event.clientX,
event.clientY,
event.pageY.
Veamos la diferencia entre clientX/clientY
y pageX/pageY.
Cómo funcionan clientX y clientY:
si tienes una ventana de 1000 por 1000
píxeles, y el ratón está en el centro, entonces clientX
y clientY serán ambos iguales a 500. Si
luego desplazas la página horizontalmente
o verticalmente, sin mover el cursor, los valores
de clientX y clientY no cambiarán, ya que se calculan
en relación con la ventana, no con el documento.
Cómo funcionan pageX y pageY:
si tienes una ventana de 1000 por 1000
píxeles, y el cursor está en el centro, entonces
pageX y pageY serán iguales a 500. Si
luego desplazas la página 250
píxeles hacia abajo, entonces pageY se volverá igual a 750.
Por lo tanto, pageX y pageY contienen las coordenadas
del evento teniendo en cuenta el desplazamiento.
Sintaxis
event.pageX;
Ejemplo
Al mover el ratón por la página, mostraremos
sus coordenadas relativas a la ventana del navegador
(pageX y pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
