MouseEvent: свойство pageX

Чтение-только свойство pageX интерфейса MouseEvent возвращает координату X (горизонтальную) в пикселях, в которой был щелчок мыши, относительно левого края всего документа. Это включает в себя любую часть документа, которая в данный момент не отображается.

Так как свойство основано на краю документа, оно учитывает любое горизонтальное прокручивание страницы. Например, если страница прокручена таким образом, что 200 пикселей левой части документа скрыты из виду, а щелчок мыши произошел на 100 пикселей от левого края видимой области, значение, возвращаемое pageX, будет равно 300.

Изначально это свойство было определено как long целое число. Модуль CSSOM View переопределил его как double число с плавающей точкой. Подробности см. в разделе Совместимость с браузерами.

Дополнительную информацию о координатах, указанных таким образом, см. в разделе Системы координат.

Число с плавающей точкой double пикселей от левого края документа, в котором был щелчок мыши, независимо от текущего состояния прокрутки или размещения области просмотра.

Это свойство первоначально было определено в спецификации событий касания как целое число, но в модуле CSSOM View было переопределено как число с двойной точностью с плавающей точкой для обеспечения точности до дробных пикселей. Несмотря на то, что оба числовых типа представлены как Number в JavaScript, они могут обрабатываться по-разному внутри кода браузера, что может привести к потенциальным различиям в поведении.

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

Рассмотрим пример, демонстрирующий положение мыши относительно начала координат страницы. Поскольку этот пример представлен в <iframe>, указанный верхний левый угол относится к верхнему левому углу фрейма, а не окна браузера.

HTML

<div class="box">
  <p>Move the mouse around in this box to watch its coordinates change.</p>
  <p><code>pageX</code>: <span id="x">n/a</span></p>
  <p><code>pageY</code>: <span id="y">n/a</span></p>
</div>

HTML простой; прямоугольник, по которому мы будем отслеживать события мыши, имеет класс "box". Он содержит два <span> элемента, один с ID "x" и один с ID "y". Они обновляются при каждом событии для отображения последних координат мыши относительно страницы.

CSS

CSS для этого примера приведен ниже.

.box {
  width: 400px;
  height: 250px;
  border: 2px solid darkblue;
  background-color: blue;
  color: white;
  font:
    16px "Zilla",
    "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

JavaScript

const box = document.querySelector(".box");
const pageX = document.getElementById("x");
const pageY = document.getElementById("y");

function updateDisplay(event) {
  pageX.innerText = event.pageX;
  pageY.innerText = event.pageY;
}

box.addEventListener("mousemove", updateDisplay, false);
box.addEventListener("mouseenter", updateDisplay, false);
box.addEventListener("mouseleave", updateDisplay, false);

Код JavaScript использует addEventListener() для регистрации функции updateDisplay() в качестве обработчика событий mousemove, mouseenter и mouseleave.

updateDisplay() заменяет содержимое элементов <span>, предназначенных для хранения координат X и Y, значениями pageX и pageY.

Результат

Попробуйте это здесь:

Вы также можете увидеть пример, демонстрирующий как получить информацию о позиции мыши в каждой доступной системе координат.

До добавления в спецификацию CSSOM View свойства pageX и pageY были доступны на интерфейсе UIEvent в ограниченном подмножестве браузеров в течение короткого времени.

• MouseEvent.pageY
• Системы координат