В чем разница между screenX / Y, clientX / Y и pageX / Y? - PullRequest
518 голосов
/ 20 мая 2011

В чем разница между screenX / Y, clientX / Y и pageX / Y?

Также для iPad Safari расчеты похожи на настольные - ИЛИ есть какая-то разница из-за области просмотра?

Было бы здорово, если бы вы указали мне пример.

Ответы [ 5 ]

451 голосов
/ 18 февраля 2012

В 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>
419 голосов
/ 30 января 2014

Вот изображение, объясняющее разницу между pageY и clientY.

pageY vs clientY

То же самое для pageX и clientX соответственно.


pageX/Y координаты относятся к верхнему левому углу всей отображаемой страницы (включая части, скрытые прокруткой),

, в то время как clientX/Y координаты относятся к верхнему левому углу видимой части страницы, "видимой" через окно браузера.

См. Демонстрацию

Вам, вероятно, никогда не понадобится screenX/Y

110 голосов
/ 01 июля 2012
  1. pageX / Y дает координаты относительно элемента <html> в пикселях CSS.
  2. clientX / Y дает координаты относительноviewport в пикселях CSS.
  3. screenX / Y дает координаты относительно screen в пикселях устройства.

По поводу вашего последнего вопроса, если вычисленияпохожи в настольных и мобильных браузерах ... Для лучшего понимания - в мобильных браузерах - нам необходимо различать две новые концепции: область просмотра макета и визуальную область просмотра .Визуальный видовой экран - это часть страницы, которая в данный момент отображается на экране.Окно просмотра макета является синонимом полной страницы, отображаемой в браузере на рабочем столе (со всеми элементами, которые не отображаются в текущем окне просмотра).

В мобильных браузерах pageX и pageY по-прежнему относительно страницы в пикселях CSS, поэтому вы можете получить координаты мыши относительно страницы документа.С другой стороны, clientX и clientY определяют координаты мыши по отношению к визуальному окну просмотра .

Здесь есть еще один поток stackoverflow, касающийся различий между визуальным окном просмотра и окном просмотра макета: Разница между визуальным окном просмотра и окном просмотра макета?

Еще один хороший ресурс: http://www.quirksmode.org/mobile/viewports2.html

24 голосов
/ 11 августа 2014

Что помогло мне, так это добавить событие прямо на эту страницу и кликать по себе! Откройте консоль в инструментах разработчика / Firebug и т. Д. И вставьте это:

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

С помощью этого фрагмента вы можете отслеживать позицию щелчка при прокрутке, перемещать окно браузера и т. Д.

Обратите внимание, что pageX / Y и clientX / Y одинаковы при прокрутке до самого верха!

5 голосов
/ 20 мая 2011

Разница между ними будет зависеть в значительной степени от того, на какой браузер вы сейчас ссылаетесь. Каждый реализует эти свойства по-разному, или не реализует вообще. Quirksmode содержит отличную документацию о различиях браузеров в отношении стандартов W3C, таких как события DOM и JavaScript.

...