Справочник API
event.pageX в jQuery
Содержание статьи
-
Категории: Events › Event Object
Содержит горизонтальную координату события от мыши относительно начала координат document (левого края страницы).
Синтаксис и описание:
Добавлено в jQuery 1.0.4event.pageX
Свойство event.pageX содержит горизонтальную координату указателя мыши в момент события — расстояние в пикселях от левого края всего документа (с учётом прокрутки страницы), а не только видимой области окна.
Работает у событий мыши (
click,mousemove,mousedownи т. п.) и у событий указателя/касаний, где браузер формирует координаты страницы.Значение растёт при прокрутке страницы вниз или вправо: если пользователь прокрутил документ на 300 пикселей вниз и кликнул в верхней части видимой области, event.pageY всё равно покажет расстояние от самого верха документа, а не от верха окна.
Возвращаемое значение: (число) координата в пикселях.
Примечание: pageX часто путают с соседними координатами события мыши — вот в чём разница.
Свойство Отсчитывается от Учитывает прокрутку event.pageX / pageY левого/верхнего края документа да event.clientX / clientY левого/верхнего края видимой области окна нет event.screenX / screenY левого/верхнего края экрана нет event.offsetX / offsetY левого/верхнего края целевого элемента (нативное свойство, jQuery копирует его как есть) — Ещё момент:
Если страница не прокручена (
scrollXиscrollYравны нулю), значения pageX и clientX совпадают — разница появляется только после прокрутки. Для событий на мобильных устройствах (касания) аналогичные координаты лежат вevent.originalEvent.touches[0].pageX, так как уTouchEventкоординаты хранятся не на самом событии, а внутри списка касаний, и jQuery их автоматически не нормализует.В jQuery 3.x и 4.0:
Свойство работает без изменений. Это нормализованная jQuery-версия — на чистом JavaScript у события мыши те же данные лежат в
event.pageX/event.pageYнапрямую (это стандартные свойстваMouseEvent; jQuery их не вычисляет, а просто берёт изevent.originalEvent).
Примеры:
Выводим координаты курсора при движении мыши по документу:
$( document ).on( "mousemove", function ( event ) { $( "#coords" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY ); } );Показываем всплывающую подсказку рядом с курсором в точке клика:
$( "#area" ).on( "click", function ( event ) { $( "#tooltip" ) .css( { left: event.pageX + 10, top: event.pageY + 10 } ) .text( "Клик здесь" ) .show(); } );