Element: auxclick event

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

addEventListener("auxclick", (event) => { })

onauxclick = (event) => { }

Ereignistyp

Ein PointerEvent. Erbt von MouseEvent.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell

Repräsentiert den Winkel zwischen der Achse eines Wandlers (einem Zeiger oder Stylus) und der X-Y-Ebene eines Gerätescreens.

PointerEvent.azimuthAngle Schreibgeschützt Experimentell

Repräsentiert den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Achse des Wandlers (einem Zeiger oder Stylus) als auch die Y-Achse enthält.

PointerEvent.pointerId Schreibgeschützt

Eine eindeutige Kennung für den Zeiger, der das Ereignis verursacht.

PointerEvent.width Schreibgeschützt

Die Breite (Ausdehnung auf der X-Achse) in CSS-Pixeln, der Kontaktgeometrie des Zeigers.

PointerEvent.height Schreibgeschützt

Die Höhe (Ausdehnung auf der Y-Achse) in CSS-Pixeln, der Kontaktgeometrie des Zeigers.

PointerEvent.pressure Schreibgeschützt

Der normalisierte Druck der Zeigereingabe im Bereich von 0 bis 1, wobei 0 und 1 den minimalen und maximalen Druck darstellen, den die Hardware erkennen kann.

PointerEvent.tangentialPressure Schreibgeschützt

Der normalisierte tangentiale Druck der Zeigereingabe (auch bekannt als Laufdruck oder Zylinderbelastung) im Bereich von -1 bis 1, wobei 0 die neutrale Stellung des Bedienelements ist.

PointerEvent.tiltX Schreibgeschützt

Der Flächenwinkel (in Grad, im Bereich von -90 bis 90) zwischen der Y-Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z.B. eines Stifts) als auch die Y-Achse enthält.

PointerEvent.tiltY Schreibgeschützt

Der Flächenwinkel (in Grad, im Bereich von -90 bis 90) zwischen der X-Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z.B. eines Stifts) als auch die X-Achse enthält.

PointerEvent.twist Schreibgeschützt

Die Drehung des Zeigers (z.B. eines Stifts) im Uhrzeigersinn um seine Hauptachse in Grad, mit einem Wert im Bereich von 0 bis 359.

PointerEvent.pointerType Schreibgeschützt

Gibt den Gerätetyp an, der das Ereignis verursacht hat (Maus, Stift, Berührung, etc.).

PointerEvent.isPrimary Schreibgeschützt

Gibt an, ob der Zeiger den primären Zeiger dieses Zeigertyps repräsentiert.

Verhinderung von Standardaktionen

Für die überwiegende Mehrheit der Browser, die einen Mittelklick mit dem Öffnen eines Links in einem neuen Tab verknüpfen, einschließlich Firefox, ist es möglich, dieses Verhalten zu unterbinden, indem preventDefault() innerhalb eines auxclick-Ereignis-Handlers aufgerufen wird.

Wenn Sie auxclick-Ereignisse abhören, die von Elementen ausgehen, die keine Eingabe oder Navigation unterstützen, möchten Sie häufig andere Standardaktionen, die der Down-Aktion der Mittlertaste der Maus zugeordnet sind, explizit verhindern. Unter Windows ist dies normalerweise das Autoscrolling, und unter macOS und Linux ist dies normalerweise das Einfügen aus der Zwischenablage. Dies kann durch Verhinderung des Standardverhaltens des mousedown oder pointerdown-Ereignisses erreicht werden.

Zusätzlich müssen Sie möglicherweise vermeiden, dass ein Systemkontextmenü nach einem Rechtsklick geöffnet wird. Aufgrund von Zeitunterschieden zwischen Betriebssystemen ist auch dies kein verhinderbares Standardverhalten von auxclick. Stattdessen kann dies durch Verhinderung des Standardverhaltens des contextmenu-Ereignisses erreicht werden.

Beispiele

In diesem Beispiel definieren wir Funktionen für zwei Ereignis-Handler — onclick und onauxclick. Ersteres ändert die Farbe des Button-Hintergrunds, während letzteres die Button-Vordergrund (Text)-Farbe ändert. Sie können die beiden Funktionen in Aktion sehen, indem Sie das Demo mit einer Mehrtasten-Maus ausprobieren (sehen Sie es live auf GitHub; auch sehen Sie sich den Quellcode an).

JavaScript

let button = document.querySelector("button");
let html = document.querySelector("html");

function random(number) {
  return Math.floor(Math.random() * number);
}

function randomColor() {
  return `rgb(${random(255)} ${random(255)} ${random(255)})`;
}

button.onclick = () => {
  button.style.backgroundColor = randomColor();
};

button.onauxclick = (e) => {
  e.preventDefault();
  button.style.color = randomColor();
};

button.oncontextmenu = (e) => {
  e.preventDefault();
};

Beachten Sie, dass neben dem Erfassen des auxclick-Ereignisses mit onauxclick auch das contextmenu-Ereignis erfasst wird und darauf preventDefault() aufgerufen wird, um zu verhindern, dass sich das Kontextmenü öffnet, nachdem die Farbänderung angewendet wurde.

HTML

<button><h1>Click me!</h1></button>

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

button {
  border: 0;
  background-color: white;
  font-size: 8vw;
  display: block;
  width: 100%;
  height: 100%;
}

h1 {
  letter-spacing: 0.5rem;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: Einführung in Ereignisse
• click
• contextmenu
• dblclick
• mousedown
• mouseup
• pointerdown
• pointerup