MouseEvent pageX Property

Exemplo

Saída as coordenadas do ponteiro do mouse quando o botão do mouse é clicado em um elemento:

var x = event.pageX; // Get the horizontal coordinate
var y = event.pageY; // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;

O resultado da coor poderia ser:

X coords: 162, Y coords: 40

Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

A propriedade pageX retorna a coordenada horizontal (de acordo com o documento) do ponteiro do mouse quando um evento de mouse foi acionado.

O documento é a página web.

Dica: Para obter a coordenada vertical (de acordo com o documento) do ponteiro do mouse, use o pageY propriedade.

Nota: Esta propriedade é somente leitura.

Nota: Esta propriedade é não-padrão, mas funciona na maioria dos principais navegadores.

Suporte navegador

Propriedade
pageX	sim	12,0	sim	sim	sim

Sintaxe

event .pageX

Detalhes técnicos

Valor de retorno:	Um número, representando a coordenada horizontal do cursor do rato, em pixels
DOM Versão:	Nenhum

mais Exemplos

Exemplo

Saída as coordenadas do cursor do rato enquanto o cursor do rato se move sobre um elemento:

var x = event.pageX;
var y = event.pageY;
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

Tente você mesmo "

Exemplo

Uma demonstração das diferenças entre clientX e clientY e screenX e screenY:

var pX = event.pageX;
var cX = event.clientX;
var pY = event.pageY;
var cY = event.clientY;
var coords1 = "page - X: " + pX + ", Y coords: " + pY;
var coords2 = "client - X: " + cX + ", Y coords: " + cY;

Tente você mesmo "