Propriedade MouseEvent clientX
Exemplo
Emita as coordenadas do ponteiro do mouse quando o botão do mouse é clicado em um elemento:
var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A propriedade clientX retorna a coordenada horizontal (de acordo com a área do cliente) do ponteiro do mouse quando um evento de mouse foi acionado.
A área do cliente é a janela atual.
Dica: Para obter a coordenada vertical (de acordo com a área do cliente) do ponteiro do mouse, utilize a propriedade clientY .
Nota: Esta propriedade é somente leitura.
Suporte ao navegador
Property | |||||
---|---|---|---|---|---|
clientX | Yes | Yes | Yes | Yes | Yes |
Sintaxe
event.clientX
Detalhes técnicos
Valor de retorno: | Um Número, representando a coordenada horizontal do ponteiro do mouse, em pixels |
---|---|
Versão DOM: | Eventos DOM Nível 2 |
Mais exemplos
Exemplo
Emita as coordenadas do ponteiro do mouse enquanto o ponteiro do mouse se move sobre um elemento:
var x = event.clientX;
var y = event.clientY;
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
Exemplo
Uma demonstração das diferenças 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 = "client - X: " + cX + ", Y coords: " + cY;
var coords2 = "screen - X: " + sX + ", Y coords: " + sY;
Páginas relacionadas
Referência HTML DOM: propriedade MouseEvent clientY
Referência HTML DOM: propriedade MouseEvent screenX
Referência HTML DOM: propriedade MouseEvent screenY
Referência HTML DOM: propriedade MouseEvent offsetX
Referência HTML DOM: propriedade MouseEvent offsetY