MouseEvent: свойство clientX

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

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

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

Например, нажатие на левую границу области просмотра всегда приведет к событию мыши со значением clientX равным 0, независимо от того, прокручена ли страница горизонтально.

Значение

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

Примеры

В этом примере отображаются координаты вашей мыши всякий раз, когда происходит событие 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}`;
}

Результат

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

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

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`clientX`	1	12	1	10.6	1	18	4	11	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/clientX