JS властивість Event.pageX
Загальний опис
Властивість pageX об'єкта MouseEvent повертає горизонтальну координату курсора миші відносно початку сторінки. Це зручно, коли потрібно визначити положення миші незалежно від прокрутки сторінки, оскільки pageX враховує і початкову точку документа, і відстань прокручування по горизонталі.
При використанні pageX, ви зможете відстежувати місце, куди користувач натискає або переміщує курсор, навіть якщо сторінка була прокручена. Наприклад, pageX поверне значення 300, якщо курсор розташований на 300 пікселів праворуч від лівого краю сторінки, незалежно від того, наскільки сторінка була прокручена. Це корисно в інтерфейсах користувача, де потрібно динамічно змінювати положення елементів або реагувати на події миші.
document.addEventListener('click', function(event) {
console.log("Координата X відносно сторінки: " + event.pageX);
});
Код вище прослуховує подію кліку та виводить горизонтальну позицію миші відносно початку документа в момент натискання. Такий підхід дозволяє з легкістю відслідковувати координати на великих сторінках або у випадках, коли відстань прокрутки змінюється.
Важливо знати, що значення pageX буде недоступним, якщо подія не була ініційована мишею, тобто не для всіх типів подій. Ця властивість повертає числове значення, що відображає відстань у пікселях від лівого краю сторінки.
| Порада: | Використовуйте |
| Порада: | Для налаштування подій миші використовуйте |
| Порада: | Якщо вам потрібен постійний доступ до координат |
Синтаксис
event.pageXЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей код дозволяє вмикати і вимикати режим переміщення квадрата. Коли режим активний, квадрат слідує за горизонтальною позицією миші, обмежуючись шириною контейнера. Це забезпечує інтерактивність і демонструє, як pageX дозволяє реагувати на рухи курсора відносно документа.
У цьому прикладі елемент переміщається по горизонталі разом із мишею, але обмежується видимими межами сторінки. pageX використовується для відстеження позиції курсора, і вона коригується таким чином, щоб елемент не виходив за межі ширини сторінки.
document.addEventListener('mousemove', function(event) {
let box = document.getElementById('box');
let maxX = document.documentElement.scrollWidth - box.offsetWidth;
let newX = Math.min(event.pageX, maxX);
box.style.left = newX + 'px';
});Цей код змінює колір фону сторінки залежно від горизонтальної позиції курсора. Він використовує pageX для обчислення значення відтінку кольору, що створює інтерактивний ефект фону при русі миші.
document.addEventListener('mousemove', function(event) {
let intensity = (event.pageX / window.innerWidth) * 100;
document.body.style.backgroundColor = `hsl(${intensity}, 50%, 50%)`;
});