Em JavaScript:
pageX
, pageY
, screenX
, screenY
, clientX
, E clientY
retorna 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.
pageX
e 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.
screenX
e 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.
clientX
e 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>