Propriedade event.clientY
A propriedade event.clientY contém as
coordenadas do cursor do mouse no eixo Y.
Para determinar as coordenadas, também existem as propriedades
event.clientX,
event.pageX,
event.pageY.
Vamos ver a diferença entre clientX/clientY
e pageX/pageY.
Como funcionam clientX e clientY:
se você tem uma janela de 1000 por 1000
pixels, e o mouse está no centro, então clientX
e clientY serão ambos iguais a 500. Se
você então rolar a página horizontalmente
ou verticalmente, sem mover o cursor, os valores
de clientX e clientY não mudarão, pois são contados
em relação à janela, e não ao documento.
Como funcionam pageX e pageY:
se você tem uma janela de 1000 por 1000
pixels, e o cursor está no centro, então
pageX e pageY serão iguais a 500. Se
você então rolar a página 250
pixels para baixo, então pageY se tornará igual a 750.
Assim, pageX e pageY contêm as coordenadas
do evento levando em conta a rolagem.
Sintaxe
event.clientY;
Exemplo
Ao mover o mouse pela página, vamos exibir
suas coordenadas em relação à janela do navegador
(clientX e clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
