JS властивість Event.shiftKey (Mouse)
Загальний опис
Властивість shiftKey об'єкта MouseEvent повертає булеве значення (true або false), яке вказує, чи була натиснута клавіша "Shift" під час виконання події миші (наприклад, click, mousemove або mousedown). Це дозволяє створювати різноманітну поведінку для елементів на сторінці залежно від того, чи утримується "Shift". Наприклад, можна змінювати спосіб виділення елементів або надавати додаткові можливості при взаємодії з елементами на сторінці.
Робота з shiftKey досить проста: коли користувач викликає подію миші, ви можете перевірити, чи утримував він клавішу "Shift". Якщо так, то можна виконати альтернативну дію, яка відрізняється від звичайної взаємодії. Наприклад, користувач може виконати спеціальну команду, перетягуючи елемент з натиснутою клавішею "Shift", або змінити напрямок анімації.
Приклад використання:
document.addEventListener('click', function(event) {
if (event.shiftKey) {
console.log('Клавіша Shift була натиснута!');
} else {
console.log('Клавіша Shift не була натиснута.');
}
});
У цьому прикладі при кожному кліку перевіряється, чи була натиснута клавіша "Shift", і виводиться відповідне повідомлення в консоль. Це дозволяє додавати гнучкішу логіку до дій користувача.
Важливо пам'ятати, що властивість shiftKey доступна для всіх подій, пов'язаних з мишею. Це означає, що її можна використовувати не лише для кліків, а й для перетягування, подвійного кліку або навіть під час руху миші. Завдяки цьому ви можете створювати інтуїтивні інтерфейси, які реагують на додаткові натискання клавіш для покращення користувацького досвіду.
| Порада: | Не варто перевіряти лише наявність події миші, краще одразу обробляти стан клавіші "Shift". Це дасть можливість уникнути зайвих дій і точніше контролювати події. |
| Порада: | Для відстеження тривалих дій, таких як перетягування елементів, можна перевіряти |
| Порада: | Спробуйте застосовувати |
Синтаксис
event.shiftKeyЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач може натискати в межах області малювання (синій блок) і створювати червоні прямокутники тільки тоді, коли утримується клавіша "Shift". В іншому випадку подія кліку відбувається без жодної дії. Це демонструє, як можна використовувати shiftKey для активації спеціальних режимів дій у вашому інтерфейсі.
Цей приклад змінює колір фону сторінки залежно від того, чи утримується клавіша "Shift" під час руху миші. Якщо користувач натискає "Shift" і пересуває мишу, фон стає блакитним, а якщо відпустити "Shift", фон повертається до білого.
document.addEventListener('mousemove', function(event) {
if (event.shiftKey) {
document.body.style.backgroundColor = 'lightblue';
} else {
document.body.style.backgroundColor = 'white';
}
});У цьому прикладі реалізовано режим "виділення елементів" за допомогою клавіші "Shift". Коли користувач натискає мишу з утриманою клавішею "Shift", режим виділення перемикається, і під час руху миші виводиться інформація про виділення елементів. Цей підхід може використовуватися для створення інструментів малювання або редагування.
let selectionMode = false;
document.addEventListener('mousedown', function(event) {
if (event.shiftKey) {
selectionMode = !selectionMode;
console.log('Режим виділення:', selectionMode ? 'ввімкнено' : 'вимкнено');
}
});
document.addEventListener('mousemove', function(event) {
if (selectionMode) {
console.log('Виділення елементів...');
}
});