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;
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;
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;
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