JS властивість Event.ctrlKey (Mouse)
Загальний опис
ctrlKey — це властивість об'єкта MouseEvent, яка повертає булеве значення, що вказує, чи була натиснута клавіша "Ctrl" під час події миші. Вона використовується для обробки подій, коли важливо знати, чи користувач тримав натиснутою клавішу "Ctrl", наприклад, для виконання спеціальних функцій або для додаткового керування.
Це особливо корисно для створення комбінацій миші та клавіатури, коли натискання клавіші "Ctrl" під час кліку змінює дію або додає іншу функціональність. Наприклад, багато додатків використовують комбінації, де "Ctrl" + "Click" виконує дію, відмінну від звичайного кліку. Властивість ctrlKey повертає true, якщо "Ctrl" була натиснута, і false в іншому випадку.
document.addEventListener('click', function(event) {
if (event.ctrlKey) {
console.log("Натиснута клавіша Ctrl під час кліку!");
}
});
Залежно від ваших потреб, ctrlKey можна використовувати разом з іншими властивостями MouseEvent, такими як shiftKey, altKey або metaKey, щоб створити складні комбінації, котрі відповідають конкретним взаємодіям користувача. Це також допомагає уникнути конфліктів з інтерфейсами, де звичайний клік може мати одне призначення, а клік з "Ctrl" – інше. Зазвичай властивість ctrlKey використовується з подіями click, dblclick, mousedown та mouseup.
| Порада: | Для запобігання конфліктам з інтерфейсом користувача або іншими комбінаціями, використовуйте |
| Порада: | Якщо створюєте власні комбінації для обробки подій, враховуйте, що |
| Порада: | Для великих проєктів можна створити об'єкт з усіма комбінаціями, які ви використовуєте, щоб легко змінювати їх у майбутньому. Це забезпечить легкість у підтримці й масштабуванні коду. |
Синтаксис
event.ctrlKeyЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі подія click спрацьовує на блоці colorBox. Якщо користувач утримує клавішу "Ctrl" під час кліку, колір фону блоку змінюється на обраний у формі колір. Якщо "Ctrl" не натиснуто, з'являється повідомлення з інструкцією. Це дає можливість зрозуміти, як використовувати MouseEvent -> ctrlKey для додавання додаткових умов до дій при кліку.
Цей код використовує ctrlKey для активації спеціального режиму перетягування, де положення елемента змінюється при переміщенні миші. Це може бути корисно для створення режиму редагування або для переміщення елементів в інтерфейсі, коли натиснута клавіша "Ctrl".
document.addEventListener('mousemove', function(event) {
if (event.ctrlKey) {
let indicator = document.getElementById('indicator');
indicator.style.left = event.clientX + 'px';
indicator.style.top = event.clientY + 'px';
}
});Цей приклад показує, як використовувати ctrlKey для визначення спеціальної комбінації (правий клік + Ctrl), що може бути корисним для відкриття додаткового меню чи налаштувань.
document.addEventListener('mousedown', function(event) {
if (event.ctrlKey && event.button === 2) { // Правий клік з Ctrl
console.log("Спеціальне меню викликано правою кнопкою миші з Ctrl");
}
});