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, щоб отримати точні координати на площині.
| Порада: |
|
| Порада: | Якщо потрібно обмежити зону взаємодії, використовуйте |
| Порада: | Для обробки подій в адаптивних веб-застосунках завжди тестуйте |
Синтаксис
event.clientXЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
10.6 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі функція mousemove відстежує положення миші, використовуючи clientX для визначення горизонтальної координати. Залежно від вибору користувача (фон або текст), колір обраного елементу змінюється в реальному часі, переходячи від червоного до синього, що дозволяє створити інтерактивний досвід для користувача.
Цей приклад дозволяє перетягувати елемент при кліку, автоматично центрованим на координаті clientX. Це зручно для реалізації функції перетягування, коли об'єкт переміщується за точкою кліку.
document.addEventListener('click', function(event) {
let box = document.querySelector('.draggable');
box.style.left = event.clientX - box.offsetWidth / 2 + 'px';
});Цей код змінює фон елементу у відповідності з рухом миші, використовуючи clientX для визначення горизонтального положення фону. Це створює ефект плавного пересування фонового зображення, що може бути корисним для створення динамічних інтерфейсів або інтерактивних фонових ефектів.
document.addEventListener('mousemove', function(event) {
let gradient = document.querySelector('.background');
gradient.style.backgroundPosition = `${event.clientX}px 0px`;
});