event.button в JavaScript — яка кнопка миші натиснута

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

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

Приклади

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

<header>
  <h2 class="title">MouseEvent -> button</h2>
  <p class="description">Визначає, яка кнопка миші була натиснута під час події</p>
</header>
<main>
  <div class="result">
    <div id="colorBox" class="box"></div>
    <p id="output">Натисніть на квадрат мишею</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.box {
  width: 200px;
  height: 200px;
  background-color: lightgray;
  margin: 0 auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
}

.box:hover {
  opacity: 0.8;
}

const colorBox = document.getElementById('colorBox');
const output = document.getElementById('output');

// Обробник події для зміни кольору залежно від кнопки миші
colorBox.addEventListener('mousedown', event => {
  if (event.button === 0) {
    colorBox.style.backgroundColor = 'lightgreen';
    output.textContent = 'Ліва кнопка миші: колір змінено на зелений';
  } else if (event.button === 1) {
    colorBox.style.backgroundColor = 'lightblue';
    output.textContent = 'Середня кнопка миші: колір змінено на блакитний';
  } else if (event.button === 2) {
    colorBox.style.backgroundColor = 'lightcoral';
    output.textContent = 'Права кнопка миші: колір змінено на червоний';
  }
});

// Вимикаємо стандартне контекстне меню для правої кнопки миші
colorBox.addEventListener('contextmenu', event => {
  event.preventDefault();
});
//# sourceURL=pen.js

<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('Новий розділ відкрито');
}