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 Zustand1
: Zusatztaste gedrückt, normalerweise die Radtaste oder die mittlere Taste (falls vorhanden)2
: Sekundäre Taste gedrückt, normalerweise die rechte Taste3
: Vierte Taste, typischerweise die Browser Zurück-Taste4
: 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
<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