В JavaScript:
pageX
, pageY
, screenX
, screenY
, clientX
и clientY
возвращает число, указывающее числофизические «CSS-пиксели» - точка отсчетаТочка события - это место, где пользователь щелкнул, контрольная точка - это точка в левом верхнем углу.Эти свойства возвращают горизонтальное и вертикальное расстояние от этой контрольной точки.
clientX
и clientY
:
Относительно верхнего левого края полностью отображаемой области содержимого в браузере,Эта контрольная точка находится под строкой URL и кнопкой возврата в верхнем левом углу.Эта точка может находиться в любом месте окна браузера и может фактически изменить местоположение, если на страницах есть встроенные прокручиваемые страницы, а пользователь перемещает полосу прокрутки.
screenX
и screenY
:
Относительно верхнего левого угла физического экрана / монитора эта контрольная точка перемещается только в случае увеличения или уменьшения количества мониторов или разрешения монитора.
pageX
и pageY
:
Относительно верхнего левого края области содержимого ( область просмотра ) окна браузера.Эта точка не перемещается, даже если пользователь перемещает полосу прокрутки из браузера.
Для визуального отображения, в каких браузерах поддерживаются какие свойства:
http://www.quirksmode.org/dom/w3c_cssom.html#t03
В w3schools есть онлайн-переводчик и редактор Javascript, чтобы вы могли видеть, что каждый из них делает
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>