JS властивість Event.screenX
Загальний опис
screenX — це властивість об'єкта MouseEvent, яка повертає горизонтальну (по осі X) позицію курсору миші в пікселях відносно початку екрана. Ця властивість враховує всі монітори у вашій системі, якщо їх кілька, і відображає позицію відносно верхнього лівого кута основного екрану.
Коли відбувається будь-яка подія, пов’язана з мишею (наприклад, натискання або переміщення), браузер генерує об’єкт події MouseEvent, до якого входить властивість screenX. Вона може бути використана для відстеження точного положення курсору користувача відносно екрана, що може бути корисно для інтерактивних інтерфейсів, таких як інструменти малювання або гри.
Для доступу до screenX, треба додати обробник подій до елемента, наприклад:
document.addEventListener('mousemove', function(event) {
console.log(event.screenX);
});
У цьому прикладі кожен раз, коли користувач переміщує мишу, у консоль буде виводитися поточна горизонтальна координата курсору відносно екрана.
Слід звернути увагу на те, що screenX відображає координати відносно фізичного екрана, а не вікна браузера. Це може бути корисним у випадках, коли потрібно відстежувати положення миші поза межами веб-сторінки або коли потрібно синхронізувати події між декількома моніторами.
Також варто зазначити, що при роботі з декількома моніторами, якщо курсор знаходиться на додатковому екрані лівіше або вище головного, значення screenX можуть бути негативними. Це дозволяє точно відслідковувати положення курсору незалежно від розташування моніторів у системі.
| Порада: | Під час роботи з декількома моніторами, значення |
| Порада: | Для роботи з функціоналом, що залежить від положення миші на кількох моніторах, варто звернути увагу на налаштування користувача. Наприклад, відстежуючи курсор на всіх екранах, потрібно переконатися, що система правильно ідентифікує положення миші відносно головного монітора. |
| Порада: | Якщо вам потрібно відстежити події з мишею для специфічних сценаріїв, таких як ігри чи анімації, краще створювати окремі обробники подій для миші, які оновлюють стан в режимі реального часу за допомогою |
Синтаксис
event.screenXЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Користувач бачить блок, колір якого змінюється під час переміщення миші по екрану. Значення координати screenX впливає на червоний і синій кольори блоку: чим ближче курсор до правої частини екрана, тим більше червоного кольору, а чим лівіше, тим більше синього. Такий ефект дозволяє візуалізувати взаємодію з координатами курсору на екрані.
У цьому прикладі ми обчислюємо швидкість руху миші по горизонталі, використовуючи значення screenX. Це можна застосувати в іграх або для розрахунку анімацій, які залежать від швидкості руху курсору.
let previousScreenX = 0;
document.addEventListener('mousemove', function(event) {
let speed = Math.abs(event.screenX - previousScreenX);
console.log("Швидкість руху по X:", speed);
previousScreenX = event.screenX;
});Цей приклад відстежує, коли курсор миші знаходиться близько до лівого краю екрана. Це може бути корисно, наприклад, для інтерактивних панелей або меню, які відкриваються автоматично, коли курсор наближається до краю екрана.
document.addEventListener('mousemove', function(event) {
if (event.screenX < 100) {
console.log("Курсор близько до лівого краю екрана");
}
});