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

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

Также для iPad Safari, являются ли вычисления похожими на настольные - или есть какая-то разница из-за видового экрана?

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

ОТВЕТЫ

Ответ 1

В 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>

Ответ 2

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

pageY vs clientY

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

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

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

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

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

Ответ 3

  • pageX/Y дает координаты относительно элемента <html> в пикселях CSS.
  • clientX/Y дает координаты относительно viewport в пикселях CSS.
  • screenX/Y дает координаты относительно screen в пикселях устройства.

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

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

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

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

Ответ 4

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

Ответ 5

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