Element: auxclick Ereignis

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

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

onauxclick = (event) => {};

Ein PointerEvent. Erbt von MouseEvent.

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell

Stellt den Winkel zwischen der Achse eines Wandlers (ein Zeiger oder Stift) und der X-Y-Ebene des Geräteschirms dar.

PointerEvent.azimuthAngle Schreibgeschützt Experimentell

Stellt den Winkel zwischen der Y-Z-Ebene und der Ebene dar, die sowohl die Achse eines Wandlers (ein Zeiger oder Stift) 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 (Größe auf der X-Achse), in CSS-Pixeln, der Kontaktgeometrie des Zeigers.

PointerEvent.height Schreibgeschützt

Die Höhe (Größe 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 Position der Steuerung ist.

PointerEvent.tiltX Schreibgeschützt

Der Ebenenwinkel (in Grad, im Bereich von -90 bis 90) zwischen der Y–Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z.B. Stift-Stylus) als auch die Y-Achse enthält.

PointerEvent.tiltY Schreibgeschützt

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

PointerEvent.twist Schreibgeschützt

Die Drehung des Zeigers (z.B. Stift-Stylus) 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 darstellt.

In den meisten Browsern, die den Mittelklick zum Öffnen eines Links in einem neuen Tab zuordnen, einschließlich Firefox, ist es möglich, dieses Verhalten zu unterbinden, indem preventDefault() innerhalb eines auxclick-Ereignis-Handlers aufgerufen wird.

Wenn Sie auxclick-Ereignisse überwachen, die auf Elementen entstehen, die keine Eingabe oder Navigation unterstützen, möchten Sie oft explizit andere Standardaktionen verhindern, die der Abwärtsaktion der mittleren Maustaste zugeordnet sind. Unter Windows ist dies normalerweise das automatische Scrollen, unter macOS und Linux das Einfügen in die Zwischenablage. Dies kann durch Verhindern 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 den Betriebssystemen ist dies ebenfalls kein verhinderbares Standardverhalten von auxclick. Stattdessen kann dies erreicht werden, indem das Standardverhalten des contextmenu Ereignisses verhindert wird.

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

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 und preventDefault() für dieses Ereignis aufgerufen wird, um zu verhindern, dass nach der Farbliche Anwendungsänderung ein Kontextmenü erscheint.

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