MouseEvent: свойство button

Базовая реализация Широко поддерживается

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Это MouseEvent.button свойство считывания, которое указывает, какая кнопка мыши была нажата для срабатывания события.

Это свойство гарантирует указание нажатых кнопок только для событий, вызванных нажатием или отпусканием одной или нескольких кнопок. Поэтому оно не надёжно для событий, таких как mouseenter, mouseleave, mouseover, mouseout или mousemove.

Пользователи могут настроить конфигурацию кнопок на своём указательном устройстве, поэтому, если свойство button события равно нулю, это может не означать, что событие было вызвано самой левой кнопкой на указательном устройстве; однако оно должно вести себя так, как если бы была нажата левая кнопка в стандартной конфигурации.

Примечание: Не путайте это свойство со свойством MouseEvent.buttons, которое указывает, какие кнопки нажаты для всех типов событий мыши.

Значение

Число, представляющее нажатую кнопку:

0: Нажата основная кнопка, обычно левая или неинициализированное состояние
1: Нажата вспомогательная кнопка, обычно колесико или средняя кнопка (если присутствует)
2: Нажата дополнительная кнопка, обычно правая кнопка
3: Четвёртая кнопка, обычно кнопка «Назад» браузера
4: Пятая кнопка, обычно кнопка «Вперед» браузера

Как отмечалось выше, кнопки могут быть сконфигурированы нестандартно, отклоняясь от расположения «слева направо». У мыши, настроенной для левшей, действия кнопок могут быть инвертированы. Некоторые указательные устройства имеют только одну кнопку и используют клавиатуру или другие механизмы ввода для обозначения основной, дополнительной, вспомогательной и т. д. кнопок. Другие могут иметь множество кнопок, сопоставленных с различными функциями и значениями кнопок.

Примеры

HTML

<button id="button" oncontextmenu="event.preventDefault();">
  Click here with your mouse…
</button>
<p id="log"></p>

JavaScript

let button = document.querySelector("#button");
button.addEventListener("mouseup", (e) => {
  let log = document.querySelector("#log");
  switch (e.button) {
    case 0:
      log.textContent = "Left button clicked.";
      break;
    case 1:
      log.textContent = "Middle button clicked.";
      break;
    case 2:
      log.textContent = "Right button clicked.";
      break;
    default:
      log.textContent = `Unknown button code: ${e.button}`;
  }
});

Результат

Спецификации

Спецификация
UI-события # dom-mouseevent-button

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`button`	1	12	1	10.6	1	18	4	11	1	1.0	≤37

См. также

MouseEvent

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button