Propiedad event.clientY
La propiedad event.clientY contiene
las coordenadas del cursor del mouse en el eje Y.
Para determinar las coordenadas también existen las propiedades
event.clientX,
event.pageX,
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 mouse está en el centro, entonces clientX
y clientY ambos serán 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.clientY;
Ejemplo
Al mover el mouse por la página, mostraremos
sus coordenadas relativas a la ventana del navegador
(clientX y clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
