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 Maustaste gedrückt oder losgelassen wurde, um das Ereignis auszulösen.

Diese Eigenschaft garantiert nur, anzugeben, welche Tasten während der durch das Drücken oder Loslassen einer oder mehrerer Tasten verursachten Ereignisse gedrückt oder losgelassen 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 so ändern, dass, wenn die button-Eigenschaft eines Ereignisses Null ist, es möglicherweise nicht durch die physisch am weitesten links befindliche Taste des Zeigegeräts verursacht wurde; jedoch sollte es sich so verhalten, als ob die linke Taste im Standard-Buttonlayout angeklickt wurde.

Hinweis: Verwechseln Sie diese Eigenschaft nicht mit der MouseEvent.buttons Eigenschaft, die angibt, welche Tasten für alle Arten von Mausereignissen gedrückt sind.

Wert

Eine Zahl, die eine bestimmte Taste darstellt:

0: Haupttaste, normalerweise die linke Taste oder der nicht initialisierte Zustand
1: Zusatztaste, normalerweise die Radtaste oder die mittlere Taste (falls vorhanden)
2: Sekundärtaste, 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 Standard-Layout "von links nach rechts" konfiguriert sein. Eine Maus, die für die Verwendung mit der linken Hand konfiguriert ist, kann die Tastenaktionen vertauscht haben. Einige Zeigegeräte haben nur eine Taste und verwenden Tastatur- oder andere Eingabemechanismen, um Haupt-, Sekundär-, Zusatztaste usw. anzugeben. Andere können viele Tasten haben, die verschiedenen Funktionen und Tastenwerten zugeordnet 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