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, що дозволяє створювати розширені умови для реакції на події миші. Метод є особливо корисним для кастомізації інтерфейсів користувача і розробки додаткових функцій, що базуються на поведінці користувача.

правити

Порада

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

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

Порада

Модифікаторні клавіші можуть не працювати так само у всіх браузерах, особливо Meta, яка може вказувати на клавішу "Command" на Mac, але бути неактивною на Windows. Пам’ятайте про ці відмінності при написанні крос-браузерного коду.

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

Порада

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

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

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

Синтаксис

event.getModifierState(key)

Повернення

boolean

Повертає булеве значення (true або false), яке вказує на те, чи була конкретна клавіша-модифікатор (наприклад, Shift, Control, Alt або Meta) активною під час події. Якщо зазначена клавіша була натиснута в момент виникнення події, результат буде true; якщо ні – false.

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

document.addEventListener('mousemove', function(event) {
   if (event.getModifierState('Control')) {
       console.log('Курсор переміщується з натиснутою Ctrl');
   }
});

document.addEventListener('click', function(event) {
   if (event.getModifierState('Shift') && event.getModifierState('Alt')) {
       console.log('Клік з комбінацією Shift+Alt');
   }
});