MouseEvent: свойство screenX

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Чтение-только свойство screenX интерфейса MouseEvent предоставляет горизонтальную координату (смещение) указателя мыши в координатах экрана.

Примечание: В многоэкранной среде экраны, выровненные по горизонтали, будут обрабатываться как одно устройство, и поэтому диапазон значения screenX увеличится до совокупной ширины экранов.

Значение

Значение double с плавающей точкой в пикселях.

В ранних версиях спецификации это значение определялось как целое число, обозначающее количество пикселей.

Примеры

В этом примере отображаются координаты вашей мыши всякий раз, когда срабатывает событие mousemove.

HTML

<p>Move your mouse to see its position.</p>
<p id="screen-log"></p>

JavaScript

let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
    Screen X/Y: ${e.screenX}, ${e.screenY}
    Client X/Y: ${e.clientX}, ${e.clientY}`;
}

Результат

Передача события

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

function checkClickMap(e) {
  if (e.screenX < 50) doRedButton();
  if (50 <= e.screenX && e.screenX < 100) doYellowButton();
  if (e.screenX >= 100) doRedButton();
}

Спецификации

Спецификация
UI Events # dom-mouseevent-screenx

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`screenX`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX