Atributo clientY do MouseEvent

Eventos DOM MouseEvent

Definição e uso

Quando um evento de mouse é acionado, o atributo clientY retorna a coordenada vertical do ponteiro do mouse (baseado na área do cliente).

A área do cliente é a janela atual.

Dica:Para obter a coordenada horizontal do ponteiro do mouse (baseado na área do cliente), use Atributo clientX.

Comentário:Este atributo é de leitura apenas.

Exemplo

Exemplo 1

Emita as coordenadas do ponteiro do mouse quando o botão do mouse for clicado no elemento:

var x = event.clientX;     // Obter a coordenada horizontal
var y = event.clientY;     // Obter a coordenada vertical
var coor = "Coordenadas X: " + x + ", Coordenadas Y: " + y;

Resultados:

Coordenadas X: 142, Coordenadas Y: 99

Experimente você mesmo

Exemplo 2

Emita as coordenadas do ponteiro do mouse quando o cursor se move sobre o elemento:

var x = event.clientX;
var y = event.clientY; 
var coor = "Coordenadas X: " + x + ", Coordenadas Y: " + y;
document.getElementById("demo").innerHTML = coor;

Experimente você mesmo

Exemplo 3

Demonstre a diferença entre clientX e clientY e screenX e screenY:

var cX = event.clientX;
var sX = event.screenX;
var cY = event.clientY;
var sY = event.screenY;
var coords1 = "X do cliente: " + cX + ", Coordenadas Y: " + cY;
var coords2 = "X da tela: " + sX + ", Coordenadas Y: " + sY;

Experimente você mesmo

Sintaxe

event.clientY

Detalhes técnicos

Retorno: Valor numérico, que representa a coordenada vertical do ponteiro do mouse, em pixels.
Versão do DOM： DOM Level 2 Events

Suporte do navegador

Atributo Chrome IE Firefox Safari Opera
clientY Suporte Suporte Suporte Suporte Suporte

Páginas relacionadas

Manual de referência do HTML DOM:Propriedade clientX do MouseEvent

Manual de referência do HTML DOM:Propriedade screenX do MouseEvent

Manual de referência do HTML DOM:Propriedade screenY do MouseEvent

Manual de referência do HTML DOM:Propriedade offsetX do MouseEvent

Manual de referência do HTML DOM:Propriedade offsetY do MouseEvent

Eventos DOM MouseEvent