В чем разница между screenX/Y, clientX/Y и pageX/Y?
Вопрос о различиях между screenX/Y, clientX/Y и pageX/Y
Какова разница между свойствами screenX/screenY, clientX/clientY и pageX/pageY в JavaScript?
Также интересно узнать, на iPad в Safari, совпадают ли расчеты с теми, что делаются на десктопе, или существуют какие-то различия из-за особенностей viewport?
Буду признателен, если вы приведете примеры, чтобы проиллюстрировать эти различия.
2 ответ(ов)
clientX/Y относятся к относительным координатам экрана. Например, если ваша веб-страница достаточно длинная, то clientX/Y предоставляет координаты нажатой точки в терминах её фактической пиксельной позиции на экране. В то время как ScreenX/Y дает координаты относительно начала страницы. Таким образом, clientX/Y указывает на позицию относительно видимой области, а ScreenX/Y — на позицию относительно всего документа.
Что мне помогло, так это добавить обработчик события прямо на эту страницу и покликать по ней самостоятельно! Откройте консоль в инструментах разработчика/Firebug и вставьте этот код:
document.addEventListener('click', function(e) {
console.log(
'page: ' + e.pageX + ',' + e.pageY,
'client: ' + e.clientX + ',' + e.clientY,
'screen: ' + e.screenX + ',' + e.screenY)
}, false);
Кликните в любом месте
С помощью этого кода вы сможете отслеживать позиции клика по мере прокрутки, перемещения окна браузера и так далее.
Обратите внимание, что значения pageX/Y и clientX/Y совпадают, когда вы прокрутите страницу до самого верха!
Где найти документацию по форматированию даты в JavaScript?
В чем разница между String.slice и String.substring?
Проверка соответствия строки регулярному выражению в JS
Существует ли ссылка на "последнюю" библиотеку jQuery в Google APIs?
Как создать диалог с кнопками "Ок" и "Отмена"