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

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

Властивість pageX об'єкта MouseEvent повертає горизонтальну координату курсора миші відносно початку сторінки. Це зручно, коли потрібно визначити положення миші незалежно від прокрутки сторінки, оскільки pageX враховує і початкову точку документа, і відстань прокручування по горизонталі.

При використанні pageX, ви зможете відстежувати місце, куди користувач натискає або переміщує курсор, навіть якщо сторінка була прокручена. Наприклад, pageX поверне значення 300, якщо курсор розташований на 300 пікселів праворуч від лівого краю сторінки, незалежно від того, наскільки сторінка була прокручена. Це корисно в інтерфейсах користувача, де потрібно динамічно змінювати положення елементів або реагувати на події миші.

document.addEventListener('click', function(event) {
    console.log("Координата X відносно сторінки: " + event.pageX);
});

Код вище прослуховує подію кліку та виводить горизонтальну позицію миші відносно початку документа в момент натискання. Такий підхід дозволяє з легкістю відслідковувати координати на великих сторінках або у випадках, коли відстань прокрутки змінюється.

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

правити

Порада

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

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

Порада

Для налаштування подій миші використовуйте pageX у поєднанні з іншими властивостями події, такими як pageY та target, щоб отримати повну картину про місце кліку. Це спрощує розробку адаптивних і зручних інтерфейсів.

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

Порада

Якщо вам потрібен постійний доступ до координат pageX, можна створити функцію, що зберігатиме ці значення в реальному часі, реагуючи на mousemove. Це особливо корисно для інтерактивних елементів, таких як карти або слайдери.

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

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

Синтаксис

event.pageX

Переглядачі

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

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

Переглядач
	1	1.5	1	12.1	12

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

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

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

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

Приклади

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

<div id="box" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

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';
});

document.addEventListener('mousemove', function(event) {
    let intensity = (event.pageX / window.innerWidth) * 100;
    document.body.style.backgroundColor = `hsl(${intensity}, 50%, 50%)`;
});