Atributo pageX do MouseEvent

Definição e uso

Quando um evento de mouse é acionado, o atributo pageX retorna a coordenação horizontal do ponteiro do mouse (relativa ao documento).

O documento é a página da web.

Dica:Para obter a coordenada vertical do ponteiro do mouse (relativa ao documento), use Atributo pageY.

Comentário:Este atributo é de leitura.

Comentário:Este atributo não é padrão, mas é compatível com a maioria dos navegadores principais.

Exemplo

Exemplo 1

Saída das coordenadas do ponteiro do mouse ao clicar no botão do mouse no elemento:

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

Experimente você mesmo

Exemplo 2

Saída das coordenadas do ponteiro do mouse ao se mover sobre o elemento:

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

Experimente você mesmo

Exemplo 3

Demonstração da diferença entre pageX e pageY e screenX e screenY:

var pX = event.screenX;
var cX = event.pageX;
var pY = event.screenY;
var cY = event.pageY;
var coords1 = "Coordenadas da página - X: " + pX + ", Coordenadas Y: " + pY;
var coords2 = "Coordenadas da tela - X: " + cX + ", Coordenadas Y: " + cY;

Experimente você mesmo

Sintaxe

event.pageX

Detalhes técnicos

Valor retornado: Número, que representa a coordenação horizontal do ponteiro do mouse, em pixels.
Versão DOM: Nenhum.

Suporte do navegador

Atributo Chrome IE Firefox Safari Opera
pageX Suporte 12.0 Suporte Suporte Suporte

Páginas relacionadas

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

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

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

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

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