JS властивість Event.altKey (MouseEvent)

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

Властивість altKey використовується для визначення, чи була натиснута клавіша Alt під час виникнення події миші (наприклад, при кліку або переміщенні миші). Це булеве значення, яке повертає true, якщо клавіша Alt була натиснута, і false, якщо ні. Властивість є доступною для всіх подій миші, таких як click, mousemove, mousedown, тощо.

У роботі з JavaScript події миші часто використовуються для створення динамічного інтерфейсу, і клавіша Alt може бути корисною для додаткового контролю. Наприклад, ви можете додати функціональність, яка виконується тільки тоді, коли користувач натискає мишу, утримуючи Alt.

Типова перевірка виглядає так:

document.addEventListener('click', function(event) {
    if (event.altKey) {
        console.log('Клавіша Alt була натиснута під час кліку');
    }
});

Тут подія click перевіряє, чи була натиснута клавіша Alt під час кліку на сторінці. Якщо так, в консоль виводиться відповідне повідомлення.

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

Щоб повністю розкрити потенціал властивості altKey, варто також звернути увагу на поєднання з іншими властивостями події, такими як ctrlKey або shiftKey, що дозволяє створювати складніші комбінації клавіш для управління взаємодією з користувачем.

Для прикладу, можна реалізувати функцію, яка змінює дію при утриманні клавіші Alt під час перетягування елементу мишею:

document.addEventListener('mousemove', function(event) {
    if (event.altKey) {
        // Змінюємо стиль курсора при натисканні Alt
        document.body.style.cursor = 'crosshair';
    } else {
        document.body.style.cursor = 'default';
    }
});

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

правити

Порада

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

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

Порада

Важливо знати, що деякі браузери та системи операцій можуть використовувати клавішу Alt для своїх власних дій (наприклад, виклик меню в Windows), тому варто тестувати функціональність на різних платформах, щоб переконатися в її коректній роботі.

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

Порада

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

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

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

Синтаксис

event.altKey

Переглядачі

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

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

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

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

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

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

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

Приклади

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

document.addEventListener('mousemove', function(event) {
    if (event.altKey && event.shiftKey) {
        console.log('Переміщення миші з натиснутими Alt + Shift');
    }
});

document.addEventListener('click', function(event) {
    if (event.altKey) {
        alert('Ви клікнули з натиснутою клавішею Alt!');
    }
});