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

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

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

Коли відбувається будь-яка подія, пов’язана з мишею (наприклад, натискання або переміщення), браузер генерує об’єкт події MouseEvent, до якого входить властивість screenX. Вона може бути використана для відстеження точного положення курсору користувача відносно екрана, що може бути корисно для інтерактивних інтерфейсів, таких як інструменти малювання або гри.

Для доступу до screenX, треба додати обробник подій до елемента, наприклад:

document.addEventListener('mousemove', function(event) {
    console.log(event.screenX);
});

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

Слід звернути увагу на те, що screenX відображає координати відносно фізичного екрана, а не вікна браузера. Це може бути корисним у випадках, коли потрібно відстежувати положення миші поза межами веб-сторінки або коли потрібно синхронізувати події між декількома моніторами.

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

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

event.screenX

Переглядачі

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

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

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

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

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

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

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

Приклади

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

document.addEventListener('mousemove', function(event) {
    if (event.screenX < 100) {
        console.log("Курсор близько до лівого краю екрана");
    }
});

let previousScreenX = 0;

document.addEventListener('mousemove', function(event) {
    let speed = Math.abs(event.screenX - previousScreenX);
    console.log("Швидкість руху по X:", speed);
    previousScreenX = event.screenX;
});