JS властивість Event.clientX

Загальний опис

clientX — це властивість об'єкта MouseEvent, яка повертає горизонтальну координату курсора миші у пікселях відносно видимої області браузера (вікна). Ця властивість є корисною для відстеження позиції миші під час подій, таких як click, mousemove, mousedown, mouseup тощо. Значення clientX починає відлік від лівого краю видимої області браузера, де нуль відповідає її лівій межі.

Використання clientX є надзвичайно зручним для динамічного визначення позиції миші в інтерфейсі користувача, особливо при створенні інтерактивних елементів, таких як слайдери, перетягувані об'єкти, кастомні меню та інші компоненти. Зверніть увагу, що значення clientX не враховує прокрутку сторінки, тому якщо частина сторінки була прокручена, значення clientX буде відображати координату відносно початкової точки видимої області, а не всієї сторінки.

document.addEventListener('mousemove', function(event) {
    console.log(event.clientX); // Виведе координату X відносно вікна
});

Для повноцінної роботи з координатами миші в HTML-документах може бути корисно також комбінувати clientX з іншими властивостями, такими як clientY, щоб отримати точні координати на площині.

правити

Порада

Якщо потрібно обмежити зону взаємодії, використовуйте clientX з додатковими умовами, щоб реагувати лише на події в певних межах. Це корисно для створення інтерфейсів, де потрібно обмежити пересування об’єктів.

автор: Bond правити

Порада

clientX повертає координату відносно видимої області браузера, а не всієї сторінки, тому для визначення точної позиції на сторінці використовуйте pageX, якщо вам потрібна координата, враховуючи прокрутку.

автор: Bond правити

Порада

Для обробки подій в адаптивних веб-застосунках завжди тестуйте clientX на різних розмірах екранів і у різних браузерах, щоб уникнути проблем із сумісністю та правильно врахувати зміни розміру вікна.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.clientX

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	10.6	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="draggable">перший елемент draggable</div>
<div class="draggable">другий елемент draggable</div>

document.addEventListener('click', function(event) {
    let box = document.querySelector('.draggable');
    box.style.left = event.clientX - box.offsetWidth / 2 + 'px';
});

<div class="background">перший елемент background</div>
<div class="background">другий елемент background</div>

document.addEventListener('mousemove', function(event) {
    let gradient = document.querySelector('.background');
    gradient.style.backgroundPosition = `${event.clientX}px 0px`;
});