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

581

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

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

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

javascript ipad safari mouse-position hmthr
источник
2
Еще одна демонстрация, которая использует пять различных свойств (экран, клиент, страница, слой, смещение), чтобы получить координаты мыши.
akinuri

Ответы:

504

В JavaScript:

pageX, pageY, screenX, screenY, clientX, И clientYвозвращает число , которое указывает число физических «CSS пикселей» точка находится от опорной точки. Точка события - это место, где пользователь щелкнул, контрольная точка - это точка в левом верхнем углу. Эти свойства возвращают горизонтальное и вертикальное расстояние от этой контрольной точки.

pageXи pageY:
относительно верхнего левого края полностью отображаемой области содержимого в браузере. Эта контрольная точка находится под строкой URL и кнопкой возврата в верхнем левом углу. Эта точка может находиться в любом месте окна браузера и может фактически изменить местоположение, если есть встроенные прокручиваемые страницы, встроенные в страницы, и пользователь перемещает полосу прокрутки.

screenXи screenY:
относительно верхнего левого угла физического экрана / монитора эта контрольная точка перемещается только в том случае, если вы увеличиваете или уменьшаете количество мониторов или разрешение монитора.

clientXи clientY:
относительно верхнего левого края области содержимого ( окна просмотра ) окна браузера. Эта точка не перемещается, даже если пользователь перемещает полосу прокрутки из браузера.

Для визуального отображения, какие браузеры поддерживают какие свойства:

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>
Развернуть фрагмент

Эрик Лещинский
источник
4
а в jquery offsetX и offsetY относятся к родительскому контейнеру
Мухаммед Умер
2
Ссылка на w3schools теперь доступна только через справочный раздел: w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
действителен
1
Я думаю, что это вводящее в заблуждение или, по крайней мере, неэффективное объяснение для pageX / pageY (и, как следствие, вопрос), потому что оно ссылается на строку URL и кнопку возврата, в то время как это лучше объясняется с точки зрения содержимого страницы, как, например, визуальное объяснение. ответ рассказывает. Кроме того, пример w3schools не полезен, поскольку он выводит только одну пару х / у, и в нем нет прокрутки, которая продемонстрировала бы разницу.
Роберт Монфера
4
PageX / PageY & ClientX / clientY объяснения взаимозаменяемы. Вы должны исправить это. Это вводит в заблуждение
Navpreet Kaur
1
Я думаю, что @NavpreetKaur прав. Этот ответ говорит об обратном в отношении clientX против pageX
zhouji
498

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

pageY vs clientY

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

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

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

Посмотреть демо

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

Дэн
источник
21
Круто, спасибо за демонстрацию, объясняет лучше, чем текст.
Рахул Прасад
Мне больше всего нравится объяснение @ SimoEndre
Pierre
9
хотите визуализировать что screenX/Yесть?
ayjay
1
Я хочу привязать событие клика к определенной прямоугольной области на странице, поэтому pageX/pageYследует использовать вместо clientX/clientY?
techie_28
1
как насчет простых х и у? Они кажутся такими же, как clientX / Y, когда я попробовал это сделать, но я не нашел
точной
117
  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

Эндре Симо
источник
27

Что помогло мне, так это добавить событие прямо на эту страницу и кликать по себе! Откройте консоль в инструментах разработчика / 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 одинаковы при прокрутке до самого верха!

fierysunset
источник
5

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

Доминик Барнс
источник
4
Ваш ответ хороший, но скоро он устареет. Quirksmode.org/mobile/tableViewport_desktop.html
Дан,