Atributo clientX do MouseEvent

Eventos DOM MouseEvent

Definição e uso

Quando um evento de mouse é acionado, o atributo clientX retorna a coordenada horizontal do ponteiro do mouse (baseada na área do cliente).

A área do cliente é a janela atual.

Dica:Para obter a coordenada vertical do ponteiro do mouse (baseada na área do cliente), use Propriedade clientY.

Notas:Este atributo é apenas de leitura.

Exemplo

Exemplo 1

Ao clicar no botão do mouse sobre o elemento, mostre as coordenadas do ponteiro do mouse:

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

Experimente você mesmo

Exemplo 2

Ao mover o ponteiro do mouse sobre o elemento, mostre as coordenadas do ponteiro do mouse:

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 = "coordenada de cliente - X: " + cX + ", coordenadas Y: " + cY;
var coords2 = "coordenada de tela - X: " + sX + ", coordenadas Y: " + sY;

Experimente você mesmo

Sintaxe

event.clientX

Detalhes técnicos

Retorno: Valor numérico, que representa a coordenada horizontal do ponteiro do mouse, em pixels.
Versão DOM: Nível 2 de Eventos DOM

Suporte do navegador

Atributos Chrome IE Firefox Safari Opera
clientX Suporte Suporte Suporte Suporte Suporte

Páginas relacionadas

Manual de referência do HTML DOM:Propriedade clientY 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