Яка різниця між screenX / Y, clientX / Y і pageX / Y?


581

Яка різниця між screenX/ Y, clientX/ Yта pageX/ Y?

Крім того, для iPad Safari чи є розрахунки подібними, як на робочому столі - А чи є якась різниця через вікно перегляду?

Було б чудово, якби ви могли вказати мені на приклад.


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
Я думаю, що це помилкове або принаймні неефективне пояснення для сторінкиX / pageY (і, як наслідок, питання), оскільки воно посилається на рядок URL-адреси та кнопку "назад", тоді як це краще пояснюється з точки зору вмісту сторінки, як, наприклад, з візуального пояснення відповідь підказує. Крім того, приклад w3schools не є корисним, оскільки він видає лише одну пару x / y, і в ньому немає прокрутки, яка б демонструвала різницю.
— Роберт Монфера

4
Пояснення PageX / PageY та клієнтаX / clientY замінені. ви повинні виправити це. це вводить в оману
— Navpreet Kaur

1
Я думаю, що @NavpreetKaur має рацію. Ця відповідь відповідає протилежно стосовно clientX vs pageX
— zhouji

496

Ось малюнок, що пояснює різницю між pageYта clientY.

pageY проти клієнтаY

Те саме для pageXі clientX, відповідно.


pageX/Y координати відносяться до верхнього лівого кута всієї відображеної сторінки (включаючи частини, приховані прокруткою),

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

Див. Демо

Вам, мабуть, ніколи не знадобиться screenX/Y


21
Дивовижне, дякую за демонстрацію, пояснює краще, ніж текст.
— Рахул Прасад

Мені подобається пояснення @ SimoEndre найкраще
— П'єр

9
дбаєте візуалізувати, що screenX/Yтаке?
— ayjay

1
Я хочу прив’язати подію клацання до певної прямокутної області на сторінці, тому її pageX/pageYслід використовувати замість clientX/clientY?
— techie_28

1
що про прості х і у? Вони здаються такими ж, як clientX / Y, коли я спробував це, але я не знайшов остаточної посилання на нього
— zhouji

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 однакові, коли ви прокручуєтесь до вершини!


5

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


4
Ваш відповідь хороший, але це буде скоро застаріти quirksmode.org/mobile/tableViewport_desktop.html
— Dan
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.