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.
| Порада: | Події |
| Порада: | Важливо знати, що деякі браузери та системи операцій можуть використовувати клавішу Alt для своїх власних дій (наприклад, виклик меню в Windows), тому варто тестувати функціональність на різних платформах, щоб переконатися в її коректній роботі. |
| Порада: | Якщо ви працюєте з мобільними пристроями, враховуйте, що клавіша Alt не доступна на більшості мобільних клавіатур, тому додатково перевіряйте тип пристрою і забезпечуйте альтернативні способи керування інтерфейсом без клавіатури. |
Синтаксис
event.altKeyЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад показує базове використання altKey для оповіщення користувача під час кліку з натиснутою клавішею Alt. Такий підхід може бути корисним для створення додаткових дій у інтерфейсі, наприклад, швидких доступів до прихованих функцій або опцій.
document.addEventListener('click', function(event) {
if (event.altKey) {
alert('Ви клікнули з натиснутою клавішею Alt!');
}
});У цьому прикладі перевіряється одночасне натискання клавіш Alt і Shift під час переміщення миші. Це може бути корисним для складніших взаємодій, наприклад, під час роботи з графікою або редагуванням даних, коли потрібно одночасно виконувати кілька функцій.
document.addEventListener('mousemove', function(event) {
if (event.altKey && event.shiftKey) {
console.log('Переміщення миші з натиснутими Alt + Shift');
}
});