Element: auxclick Event

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

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

onauxclick = (event) => {};

Ein PointerEvent. Erbt von MouseEvent.

Dieses Interface erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell

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

PointerEvent.azimuthAngle Schreibgeschützt Experimentell

Repräsentiert den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Transducer-Achse (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-Pixels, der Kontaktgeometrie des Zeigers.

PointerEvent.height Schreibgeschützt

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

PointerEvent.pressure Schreibgeschützt

Der normalisierte Druck des Zeigereingangs 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 des Zeigereingangs (auch als Barrel-Druck oder Zylinderbelastung bekannt) im Bereich von -1 bis 1, wobei 0 die neutrale Position der Steuerung darstellt.

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 Zeigerachse (z.B. Stiftstylus) 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 Zeigerachse (z.B. Stiftstylus) als auch die X-Achse enthält.

PointerEvent.twist Schreibgeschützt

Die Drehung des Zeigers (z.B. Stiftstylus) um seine Hauptachse im Uhrzeigersinn, mit einem Wert im Bereich 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.

Für die überwiegende Mehrheit der Browser, die einen mittleren Klick dazu verwenden, um einen Link in einem neuen Tab zu öffnen, einschließlich Firefox, ist es möglich, dieses Verhalten zu verhindern, indem preventDefault() aus einem auxclick Ereignishandler aufgerufen wird.

Wenn Sie auxclick Ereignisse überwachen, die von Elementen stammen, die keine Eingabe oder Navigation unterstützen, möchten Sie häufig andere Standardaktionen explizit verhindern, die der Abwärtshandlung der mittleren Maustaste zugeordnet sind. Unter Windows ist dies normalerweise das automatische Scrollen, und unter macOS und Linux ist dies normalerweise das Einfügen aus der Zwischenablage. Dies kann durch Verhindern des Standardverhaltens des mousedown oder pointerdown Ereignisses erreicht werden.

Zusätzlich müssen Sie möglicherweise das Öffnen eines System-Kontextmenüs nach einem Rechtsklick vermeiden. Aufgrund von Zeitunterschieden zwischen Betriebssystemen ist dies ebenfalls kein verhinderbares Standardverhalten von auxclick. Stattdessen kann dies durch Verhindern des Standardverhaltens des contextmenu Ereignisses erreicht werden.

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

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 preventDefault() auf dieses Ereignis aufgerufen wird, um zu verhindern, dass das Kontextmenü nach dem Anwenden der Farbänderung angezeigt wird.

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