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 можна перевіряти стан кількох кнопок одночасно, наприклад, перевіряючи чи обидві кнопки натиснуті одночасно.

Властивість є зручним інструментом для складних взаємодій з мишею, особливо коли треба виконувати різні дії при натисканні різних комбінацій кнопок.

правити

Порада

buttons відрізняється від властивості button. Остання повертає значення лише для однієї кнопки, натиснутої під час події, а buttons дає змогу працювати з кількома одночасно. Тому використання buttons може бути корисним у випадках, коли ви хочете відстежувати одночасні натискання.

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

Порада

Ніколи не намагайтеся безпосередньо призначати значення event.buttons. Ця властивість є тільки для читання, тобто її не можна змінити вручну. Для контролю подій миші краще використовувати інші підходи, такі як встановлення обробників подій (addEventListener).

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

Порада

Якщо вам потрібно враховувати дії сенсорних пристроїв (наприклад, планшетів або мобільних телефонів), пам'ятайте, що властивість buttons не працює для подій сенсорного вводу. Для сенсорних пристроїв слід використовувати інші об'єкти, такі як TouchEvent.

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

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

Синтаксис

event.buttons

Переглядачі

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

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

Переглядач
	43	15	11.1	30	12

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

Переглядач
	43	43	15	11.3

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

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

Приклади

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

document.addEventListener('mousedown', function(event) {
    if (event.buttons === 3) { // 1 + 2 = 3, ліва і права кнопки натиснуті
        console.log('Ліва і права кнопки натиснуті одночасно');
    }
});

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('Закінчення малювання');
    }
});