JS метод Event.getModifierState (MouseEvent)()
Загальний опис
getModifierState – це метод об’єкта MouseEvent, що використовується для перевірки, чи була натиснута певна модифікаторна клавіша, коли відбулася подія миші. Модифікаторні клавіші – це клавіші Shift, Control, Alt і Meta (на деяких платформах це Command на MacOS). Вказавши одну з цих клавіш як аргумент, getModifierState повертає true, якщо вказана клавіша активна під час події, і false в іншому випадку.
Метод використовується для того, щоб визначити контекстні дії, які залежать від натискання певних клавіш, наприклад, розширений вибір елементів або зміна функціональності при натисканні миші. Наприклад, якщо потрібно відрізнити звичайний клік від кліку з натиснутою клавішею Ctrl, метод getModifierState допоможе визначити, чи була ця клавіша натиснута.
document.addEventListener('click', function(event) {
if (event.getModifierState('Shift')) {
console.log('Shift була натиснута під час кліку.');
}
});
У прикладі вище, під час кожного кліку мишею буде перевірятися, чи була натиснута клавіша Shift. Якщо так, в консоль виводиться повідомлення. Доступні ключові значення, які приймає метод: Shift, Control, Alt, Meta, а також менш відомі, як CapsLock і NumLock. Можна передати й інші значення, проте для неіснуючих клавіш метод завжди поверне false.
Цей метод працює в поєднанні з подіями миші, що мають ключову інформацію про модифікаторні клавіші. Наприклад, mousedown, mouseup і click також підтримують виклики getModifierState, що дозволяє створювати розширені умови для реакції на події миші. Метод є особливо корисним для кастомізації інтерфейсів користувача і розробки додаткових функцій, що базуються на поведінці користувача.
| Порада: | Модифікаторні клавіші можуть не працювати так само у всіх браузерах, особливо |
| Порада: | Якщо ви працюєте з комбінаціями клавіш, спершу перевірте кілька модифікаторних клавіш одночасно. Наприклад, щоб дізнатись, чи були натиснуті |
| Порада: | Використовуйте цей метод разом з подіями |
Синтаксис
event.getModifierState(key)Параметри
Return
booleanПовертає булеве значення (
trueабоfalse), яке вказує на те, чи була конкретна клавіша-модифікатор (наприклад,Shift,Control,AltабоMeta) активною під час події. Якщо зазначена клавіша була натиснута в момент виникнення події, результат будеtrue; якщо ні –false.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей код створює інтерактивну кнопку, яка змінює результат виведення на основі натиснутої модифікаторної клавіші (Shift, Ctrl або Alt). Користувач може натискати кнопку з різними клавішами-модифікаторами, і текст у блоці результату змінюється залежно від того, яка клавіша була натиснута. Це зручно для демонстрації змін поведінки на одній кнопці, що може бути корисно при розробці додатків з багатофункціональними кнопками.
У цьому прикладі ми відстежуємо рух курсора з натиснутою клавішею Control. Це корисно, коли потрібно дати користувачу можливість утримувати Ctrl для альтернативної поведінки під час переміщення миші.
document.addEventListener('mousemove', function(event) {
if (event.getModifierState('Control')) {
console.log('Курсор переміщується з натиснутою Ctrl');
}
});Тут обробляється клік миші, якщо користувач одночасно натискає Shift і Alt. Це дозволяє створити складніші взаємодії з UI, наприклад, для виклику додаткових функцій або налаштувань лише при певній комбінації клавіш і миші.
document.addEventListener('click', function(event) {
if (event.getModifierState('Shift') && event.getModifierState('Alt')) {
console.log('Клік з комбінацією Shift+Alt');
}
});