MouseEvent: свойство buttons

Базовый уровень Широко доступен

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

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

Каждая нажимаемая кнопка представлена определенным числом (см. ниже). Если нажато несколько кнопок, значения кнопок складываются, чтобы получить новое число. Например, если одновременно нажаты средняя (2) и дополнительная (4) кнопки, значение будет 6 (т.е. 2 + 4).

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

Значение

Число, представляющее одну или несколько нажатых кнопок. При одновременном нажатии нескольких кнопок их значения суммируются (например, 3 — это основная + дополнительная).

0: Нет нажатых кнопок или неинициализированное
1: Основная кнопка (обычно левая кнопка)
2: Второстепенная кнопка (обычно правая кнопка)
4: Дополнительная кнопка (обычно колесико мыши или средняя кнопка)
8: 4-я кнопка (как правило, кнопка "Назад" браузера)
16: 5-я кнопка (как правило, кнопка "Вперед" браузера)

Примеры

В этом примере регистрируется свойство buttons при срабатывании события mousedown.

HTML

<p>Click anywhere with one or more mouse buttons.</p>
<pre id="log">[No clicks yet]</pre>

JavaScript

const buttonNames = ["left", "right", "wheel", "back", "forward"];
function mouseButtonPressed(event, buttonName) {
  // Use binary `&` with the relevant power of 2 to check if a given button is pressed
  return Boolean(event.buttons & (1 << buttonNames.indexOf(buttonName)));
}

function format(event) {
  const { type, buttons } = event;
  const obj = { type, buttons };
  for (const buttonName of buttonNames) {
    obj[buttonName] = mouseButtonPressed(event, buttonName);
  }
  return JSON.stringify(obj, null, 2);
}

const log = document.getElementById("log");
function logButtons(event) {
  log.textContent = format(event);
}

document.addEventListener("mouseup", logButtons);
document.addEventListener("mousedown", logButtons);

Результат

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`buttons`	43	12	15 Применяются ограничения в зависимости от ОС.	30	11.1	43	15	30	11.3	4.0	43

Примечания для Firefox

Firefox поддерживает buttons атрибут в Windows, Linux (GTK) и macOS со следующими ограничениями:

Утилиты позволяют настраивать действия кнопок. Поэтому основная кнопка может не быть левой кнопкой устройства, второстепенная — правой и т. д. Кроме того, средней кнопке (колесико), 4-й и 5-й кнопкам может не быть назначено значение, даже при их нажатии.
Устройства с одной кнопкой могут эмулировать дополнительные кнопки с комбинациями нажатий кнопки и клавиш.
На сенсорных устройствах кнопки могут эмулироваться настраиваемыми жестами (например, однопальцевое касание для основной, двухпальцевое — для второстепенной и т. д.).
В Linux (GTK) 4-я и 5-я кнопки не поддерживаются. Кроме того, событие mouseup всегда включает информацию об отпущенной кнопке в значении buttons.
В Mac OS X 10.5 атрибут buttons всегда возвращает 0 , так как для реализации этой функции нет платформенного API.

См. также

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/buttons