MouseEvent: button Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die schreibgeschützte Eigenschaft MouseEvent.button gibt an, welche Taste auf der Maus gedrückt wurde, um das Ereignis auszulösen.

Diese Eigenschaft garantiert nur anzugeben, welche Tasten während Ereignissen gedrückt werden, die durch das Drücken oder Loslassen einer oder mehrerer Tasten verursacht werden. Daher ist sie nicht zuverlässig für Ereignisse wie mouseenter, mouseleave, mouseover, mouseout oder mousemove.

Benutzer können die Konfiguration der Tasten auf ihrem Zeigegerät ändern, so dass, wenn der Wert der button-Eigenschaft eines Ereignisses Null ist, dies nicht durch die physisch am weitesten links befindliche Taste am Zeigegerät verursacht wurde; es sollte jedoch so verhalten, als ob die linke Taste im Standardtastenlayout geklickt wurde.

Hinweis: Verwechseln Sie diese Eigenschaft nicht mit der MouseEvent.buttons Eigenschaft, die angibt, welche Tasten für alle Mausergebnistypen gedrückt werden.

Wert

Eine Zahl, die eine bestimmte Taste repräsentiert:

0: Haupttaste gedrückt, normalerweise die linke Taste oder der nicht initialisierte Zustand
1: Zusatztaste gedrückt, normalerweise die Radtaste oder die mittlere Taste (falls vorhanden)
2: Sekundäre Taste gedrückt, normalerweise die rechte Taste
3: Vierte Taste, typischerweise die Browser Zurück-Taste
4: Fünfte Taste, typischerweise die Browser Vorwärts-Taste

Wie oben erwähnt, können Tasten anders als im Standardlayout „von links nach rechts“ konfiguriert sein. Eine für Linkshänder konfigurierte Maus kann die Tastenfunktionen vertauscht haben. Einige Zeigegeräte haben nur eine Taste und verwenden Tastatur oder andere Eingabemechanismen, um Haupttaste, sekundäre, zusätzliche usw. anzugeben. Andere können viele Tasten haben, die auf verschiedene Funktionen und Tastenwerte abgebildet sind.

Beispiele

HTML

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}`;
  }
});

Ergebnis

Spezifikationen

Specification
UI Events # dom-mouseevent-button

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

MouseEvent