JS властивість Event.buttons
Загальний опис
MouseEvent.buttons — це властивість, яка повертає числове значення, що вказує на те, які кнопки миші були натиснуті під час події. Вона відображає стан кількох кнопок одночасно у вигляді бітової маски, де кожен біт представляє певну кнопку миші. Це корисно, коли необхідно відстежити, чи була натиснута одна або кілька кнопок миші одночасно.
Значення, яке повертається, є цілим числом, де кожна кнопка миші має свій власний біт. Ось як ці біти інтерпретуються:
- Ліва кнопка миші — біт 0 (значення 1),
- Права кнопка миші — біт 1 (значення 2),
- Середня кнопка (колесо прокрутки) — біт 2 (значення 4).
Якщо натиснута тільки ліва кнопка, buttons поверне 1, якщо права — 2, якщо обидві одночасно — 3 (1 + 2), і так далі. Властивість зчитується під час таких подій, як mousedown, mouseup або mousemove.
Приклад:
document.addEventListener('mousemove', function(event) {
if (event.buttons === 1) {
console.log('Ліва кнопка натиснута');
} else if (event.buttons === 2) {
console.log('Права кнопка натиснута');
}
});
Тут ми відслідковуємо, яка кнопка миші була натиснута під час руху миші. Зверніть увагу, що при використанні buttons можна перевіряти стан кількох кнопок одночасно, наприклад, перевіряючи чи обидві кнопки натиснуті одночасно.
Властивість є зручним інструментом для складних взаємодій з мишею, особливо коли треба виконувати різні дії при натисканні різних комбінацій кнопок.
| Порада: |
|
| Порада: | Ніколи не намагайтеся безпосередньо призначати значення |
| Порада: | Якщо вам потрібно враховувати дії сенсорних пристроїв (наприклад, планшетів або мобільних телефонів), пам'ятайте, що властивість |
Синтаксис
event.buttonsЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
43 |
15 |
11.1 |
30 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
43 |
43 |
15 |
11.3 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач може переміщувати мишу всередині блоку #mouseArea, і кожного разу, коли він натискає на будь-яку кнопку миші, виводиться повідомлення, яка саме кнопка була натиснута (ліва, права чи середня). Це наочно демонструє, як властивість MouseEvent.buttons дозволяє визначити натиснуті кнопки в бітовому форматі, даючи можливість відслідковувати кілька кнопок одночасно.
У цьому прикладі перевіряється, чи натиснуті одночасно ліва та права кнопки миші. Це може бути корисним для випадків, коли потрібно забезпечити додаткові функції при використанні кількох кнопок одночасно, наприклад, для складного управління об'єктами.
document.addEventListener('mousedown', function(event) {
if (event.buttons === 3) { // 1 + 2 = 3, ліва і права кнопки натиснуті
console.log('Ліва і права кнопки натиснуті одночасно');
}
});Цей приклад демонструє, як можна створити базовий інструмент малювання. Властивість buttons використовується для відстеження початку та закінчення процесу малювання, коли натиснута ліва кнопка миші, і малювання відбувається під час руху миші.
let isDrawing = false;
document.addEventListener('mousedown', function(event) {
if (event.buttons === 1) { // Ліва кнопка миші
isDrawing = true;
console.log('Початок малювання');
}
});
document.addEventListener('mousemove', function(event) {
if (isDrawing) {
console.log(`Малюємо на координатах: (${event.clientX}, ${event.clientY})`);
}
});
document.addEventListener('mouseup', function(event) {
if (event.buttons === 0) {
isDrawing = false;
console.log('Закінчення малювання');
}
});