Свойство pageX объекта Event

Определение и применение

Свойство pageX объекта Event определяет позицию курсора мыши относительно левого края документа, или элемента.

jQuery синтаксис:

Синтаксис 1.0.4:

event.pageX

Пример использования

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

Свойство pageX — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<div></div>
<div></div>

main.js

JavaScript

$(document).ready(function () {
    $(document).mousemove(function (event) {
        // задаем функцию при перемещении курсора мыши над документом
        $('div:first').text('event.pageX: ' + event.pageX) // добавляем в первый элемент <div> в документе позицию курсора мыши относительно левого края документа
        $('div:last').text('event.pageY: ' + event.pageY) // добавляем в последний элемент <div> в документе позицию курсора мыши относительно верхнего края документа
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .mousemove() мы при перемещении курсора мыши над документом задаем функцию, которая в качестве параметра получает объект Event. С использованием метода .text() и свойств объекта Event (event.pageX и event.pageY) добавляем в первый и последний элемент <div> информацию о позиции курсора мыши относительно левого и верхнего края документа (вместо document можно указать любой интересующий Вас элемент и узнать позицию курсора относительно этого элемента, а не всего документа).