Qual é a diferença entre screenX / Y, clientX / Y e pageX / Y?

581

Qual é a diferença entre screenX/ Y, clientX/ Ye pageX/ Y?

Também para o iPad Safari, os cálculos são semelhantes aos da área de trabalho - OU há alguma diferença devido à janela de visualização?

Seria ótimo se você pudesse me indicar um exemplo.

javascript ipad safari mouse-position hmthr
fonte
2
Outra demonstração que usa cinco propriedades diferentes (tela, cliente, página, camada, deslocamento) para obter as coordenadas do mouse.
akinuri

Respostas:

504

Em JavaScript:

pageX, pageY, screenX, screenY, clientX, E clientYretorna um número que indica o número de “pixels CSS físicas” é um ponto a partir do ponto de referência. O ponto do evento é onde o usuário clicou, o ponto de referência é um ponto no canto superior esquerdo. Essas propriedades retornam a distância horizontal e vertical desse ponto de referência.

pageXe pageY:
relativo à parte superior esquerda da área de conteúdo totalmente renderizada no navegador. Este ponto de referência está abaixo da barra de URL e do botão Voltar no canto superior esquerdo. Esse ponto pode estar em qualquer lugar na janela do navegador e pode realmente alterar o local se houver páginas roláveis ​​incorporadas dentro das páginas e o usuário mover uma barra de rolagem.

screenXe screenY: Em
relação à parte superior esquerda da tela / monitor físico, esse ponto de referência se move apenas se você aumentar ou diminuir o número de monitores ou a resolução do monitor.

clientXe clientY:
Relativo à borda superior esquerda da área de conteúdo ( a janela de exibição ) da janela do navegador. Este ponto não se move, mesmo que o usuário mova uma barra de rolagem do navegador.

Para um visual em quais navegadores suportam quais propriedades:

http://www.quirksmode.org/dom/w3c_cssom.html#t03

O w3schools possui um interpretador e editor Javascript on-line para que você possa ver o que cada um faz

http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy

<!DOCTYPE html>
<html>
<head>
<script>
function show_coords(event)
{
  var x=event.clientX;
  var y=event.clientY;
  alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>

<body>

<p onmousedown="show_coords(event)">Click this paragraph, 
and an alert box will alert the x and y coordinates 
of the mouse pointer.</p>

</body>
</html>
Expandir snippet

Eric Leschinski
fonte
4
e em jquery offsetX e offsetY são relativos ao contêiner pai
Muhammad Umer 30/03
2
O link para o w3schools parece estar disponível apenas na seção de referência agora: w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
válido em
1
Eu acho que é uma explicação enganosa ou pelo menos ineficaz para a página X / página Y (e, consequentemente, a pergunta) porque faz uma referência à barra de URL e ao botão voltar, enquanto é melhor explicada em termos do conteúdo da página, como por exemplo, a explicação visual resposta diz. Além disso, o exemplo do w3schools não é útil, pois gera apenas um par x / y, e não há rolagem para demonstrar a diferença.
Robert Monfera
4
As explicações PageX / PageY e ClientX / clientY são trocadas. você deve corrigi-lo. é enganosa
Navpreet Kaur
1
Acho que o @NavpreetKaur está certo. Esta resposta recebe-lo oposto em relação clientX vs pageX
Zhouji
497

Aqui está uma imagem explicando a diferença entre pageYe clientY.

pageY vs clientY

O mesmo para pageXe clientX, respectivamente.

pageX/Y as coordenadas são relativas ao canto superior esquerdo de toda a página renderizada (incluindo partes ocultas pela rolagem),

enquanto as clientX/Ycoordenadas são relativas ao canto superior esquerdo da parte visível da página, "vistas" pela janela do navegador.

Ver demonstração

Você provavelmente nunca precisará screenX/Y

Dan
fonte
21
Incrível, obrigado pela demonstração, explica melhor que o texto.
Rahul Prasad
Eu gosto @ explicação de SimoEndre o melhor
Pierre
9
gostaria de visualizar o que screenX/Yé?
ayjay
1
Quero vincular um evento de clique em uma área retangular específica da página, portanto, pageX/pageYdeve ser usado em vez de clientX/clientY?
#
1
e o simples x e y? Eles parecem o mesmo que clientX / Y quando eu tentei, mas eu não encontrei uma referência definitiva sobre ele
Zhouji
117
  1. pageX / Y fornece as coordenadas relativas ao <html>elemento em pixels CSS.
  2. clientX / Y fornece as coordenadas relativas aos viewportpixels em CSS.
  3. screenX / Y fornece as coordenadas relativas aos screenpixels do dispositivo.

Em relação à sua última pergunta, se os cálculos são semelhantes nos navegadores de desktop e móvel ... Para uma melhor compreensão - nos navegadores móveis - precisamos diferenciar dois novos conceitos: a viewport de layout e a viewport visual . A janela de visualização visual é a parte da página exibida atualmente na tela. A viewport de layout é sinônimo de uma página completa renderizada em um navegador de desktop (com todos os elementos que não são visíveis na viewport atual).

Nos navegadores móveis, pageXe pageYainda são relativos à página em pixels CSS, para que você possa obter as coordenadas do mouse em relação à página do documento. Por outro lado clientXe clientYdefinir as coordenadas do mouse em relação ao visor visuais .

Há outro encadeamento de fluxo de pilha aqui sobre as diferenças entre a viewport visual e a viewport de layout: Diferença entre a viewport visual e a viewport de layout?

Outro bom recurso: http://www.quirksmode.org/mobile/viewports2.html

Endre Simo
fonte
27

O que me ajudou foi adicionar um evento diretamente a esta página e clicar por mim mesmo! Abra seu console nas ferramentas de desenvolvedor / Firebug etc e cole:

document.addEventListener('click', function(e) {
  console.log(
    'page: ' + e.pageX + ',' + e.pageY,
    'client: ' + e.clientX + ',' + e.clientY,
    'screen: ' + e.screenX + ',' + e.screenY)
}, false);
Click anywhere
Expandir snippet

Com esse snippet, você pode rastrear sua posição de clique enquanto rola, move a janela do navegador etc.

Observe que pageX / Y e clientX / Y são os mesmos quando você é rolado até o topo!

pôr do sol
fonte
5

A diferença entre eles dependerá em grande parte a qual navegador você está se referindo atualmente. Cada um implementa essas propriedades de maneira diferente, ou de modo algum. O Quirksmode possui uma excelente documentação sobre as diferenças do navegador em relação aos padrões do W3C, como os eventos DOM e JavaScript.

Dominic Barnes
fonte
4
A sua resposta é bom, mas ele vai se tornar desatualizado em breve quirksmode.org/mobile/tableViewport_desktop.html
Dan