JS властивість Event.metaKey (Mouse)
Загальний опис
metaKey — це властивість об’єкта MouseEvent в JavaScript, яка повертає булеве значення true або false, вказуючи, чи була натиснута клавіша Meta (зазвичай Cmd на Mac або Win на Windows) під час події миші. Властивість корисна для обробки подій, де Meta використовується як модифікатор дій миші, що дозволяє реалізувати кастомні комбінації або розширені функції.
При натисканні клавіші Meta разом із дією миші, як-от кліком, event.metaKey повертає true, що дозволяє змінювати поведінку обробника подій залежно від стану цієї клавіші. Це особливо корисно у випадках, коли необхідно підтримувати різні команди або шляхи взаємодії в додатку. Наприклад, у графічних редакторах чи текстових процесорах metaKey може додавати додаткові функції до кліків, як-от масштабування чи відкриття контекстного меню.
document.addEventListener('click', (event) => {
if (event.metaKey) {
console.log('Натиснуто Meta + клік');
} else {
console.log('Звичайний клік');
}
});
У цьому прикладі перевіряється, чи була натиснута Meta під час кліку. Якщо так, то виводиться повідомлення про комбінацію Meta + клік. Якщо ж Meta не натиснута, виконується стандартна дія.
metaKey працює разом із подіями миші, такими як click, dblclick, mousedown, та іншими. Хоча ця властивість доступна і на Windows, де Meta асоціюється з клавішею Win, основне її застосування на платформах Apple, де Meta — це Cmd. На різних платформах значення metaKey може дещо відрізнятися за поведінкою, тому варто бути уважним при розробці кросплатформених додатків.
- Порада
-
Для реалізації кросплатформенних додатків ураховуйте, що на Windows
автор: BondmetaKeyвідповідає клавішіWin. Це дозволяє перевіряти, чи працює функція на різних платформах однаково, наприклад, при обробці клавішіWinу десктопних додатках. - Порада
-
автор: BondmetaKeyможна використовувати в поєднанні з іншими модифікаторами, такими якctrlKey,shiftKey, іaltKey, для складніших комбінацій. Це дозволяє створювати унікальні команди, наприклад,Meta+Shift+Click. - Порада
-
Зважайте, що не всі браузери однаково обробляють
автор: BondmetaKey, особливо на старих версіях Windows, де її можуть взагалі не підтримувати. Це важливо враховувати для сумісності, коли користувачі можуть мати застарілі системи.
Синтаксис
event.metaKeyПереглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 1 | 1.5 | 1 | 12.1 | 12 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 18 | 4 | 1 |
| Переглядач |  |
 |
|---|---|---|
| - | - |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє, як використовувати metaKey з подією подвійного кліку. Натискання Meta при подвійній дії може активувати додатковий режим, наприклад, режим редагування в графічному або текстовому редакторі.
document.addEventListener('dblclick', (event) => {
if (event.metaKey) {
console.log('Активовано режим редагування подвійним кліком із Meta');
// Логіка для входу в режим редагування
}
});Цей код блокує стандартне контекстне меню і відкриває кастомне меню, якщо користувач натискає праву кнопку миші разом із Meta. Це може бути корисним для створення власного контекстного меню з додатковими функціями, якщо Meta натиснуто.
document.addEventListener('contextmenu', (event) => {
if (event.metaKey) {
event.preventDefault();
console.log('Відкрито спеціальне контекстне меню Meta + Правий клік');
// Логіка для спеціального контекстного меню
}
});Цей код додає обробник події click до кнопки. Якщо під час кліку натиснута клавіша Meta, виводиться повідомлення про спеціальну дію; якщо ні — відображається повідомлення про стандартну дію. Це дозволяє користувачам з Mac використовувати Cmd як модифікатор для виконання додаткових команд, що може бути корисним у додатках з кастомними гарячими клавішами або специфічними комбінаціями.
Коментарі
Коментарів ще немає — будьте першим!