JS властивість Event.button

Загальний опис

button — це властивість об'єкта MouseEvent, яка повертає номер кнопки миші, що була натиснута під час події. Вона використовується для визначення, яка саме кнопка була задіяна: ліва, середня чи права. Значення, яке повертає button, є числовим і відповідає стандарту: 0 — ліва кнопка, 1 — середня кнопка (колесо), 2 — права кнопка. Ця властивість стає в нагоді, коли вам потрібно обробляти події миші більш точно і реагувати залежно від того, яку саме кнопку натиснув користувач.

Наприклад, коли користувач натискає ліву кнопку миші, властивість button повертає значення 0. Якщо він натискає середню кнопку (звичайно це колесо миші), значення буде 1. Для правої кнопки миші значення буде 2.

Ось приклад обробки кліку:

document.addEventListener('mousedown', (event) => {
  if (event.button === 0) {
    console.log('Ліва кнопка миші натиснута.');
  } else if (event.button === 1) {
    console.log('Середня кнопка миші натиснута.');
  } else if (event.button === 2) {
    console.log('Права кнопка миші натиснута.');
  }
});

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

Також важливо зазначити, що ця властивість обробляється лише в подіях, пов'язаних з мишею, таких як mousedown, mouseup або click. При роботі з мобільними пристроями або сенсорними екранами властивість button не використовується, оскільки там немає фізичних кнопок миші.

правити

Порада

Зупиняйте подальше розповсюдження події за допомогою методу stopPropagation(), якщо потрібно зупинити дію кнопки миші тільки для певних елементів. Це дозволить ізолювати події і уникнути впливу на інші елементи на сторінці.

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

Порада

Використовуйте button для обробки середньої кнопки миші (колеса). Середня кнопка часто використовується для прокрутки, але ви можете призначити їй специфічні дії, як-от відкриття нових вкладок або швидке закриття елементів.

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

Порада

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

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

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

Синтаксис

event.button

Переглядачі

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

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

Переглядач
	1	1	1	10.6	12	9

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

Переглядач
	4.4	18	4	1

Приклади

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

<div id="targetElement">Демонстраційний елемент</div>

document.addEventListener('mouseup', (event) => {
  const element = document.getElementById('targetElement');
  if (event.button === 0) {
    element.style.backgroundColor = 'lightgreen'; // Зміна кольору при натисканні лівої кнопки
  } else if (event.button === 2) {
    element.style.backgroundColor = 'lightcoral'; // Зміна кольору при натисканні правої кнопки
  }
});

document.addEventListener('mousedown', (event) => {
  if (event.button === 1) {
    console.log('Середня кнопка натиснута: відкриття нового розділу.');
    openNewSection();
  }
});

function openNewSection() {
  // Логіка для відкриття нового розділу сторінки
  console.log('Новий розділ відкрито');
}