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. Leitet sich von MouseEvent ab.

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell

Stellt den Winkel zwischen einer Wandlerachse (einem Zeiger oder Stylus) und der X-Y-Ebene eines Geräteschirms dar.

PointerEvent.azimuthAngle Schreibgeschützt Experimentell

Stellt den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Wandlerachse (ein Zeiger oder Stylus) als auch die Y-Achse enthält, dar.

PointerEvent.pointerId Schreibgeschützt

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

PointerEvent.width Schreibgeschützt

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

PointerEvent.height Schreibgeschützt

Die Höhe (Magnitude 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, den die Hardware erkennen kann, darstellen.

PointerEvent.tangentialPressure Schreibgeschützt

Der normalisierte tangentiale Druck der Zeigereingabe (auch als Fassdruck oder Zylinderbelastung bekannt) im Bereich von -1 bis 1, wobei 0 die neutrale Position der Steuerung ist.

PointerEvent.tiltX Schreibgeschützt

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

PointerEvent.tiltY Schreibgeschützt

Der Ebene-Winkel (in Grad, im Bereich von -90 bis 90) zwischen der X–Z-Ebene und der Ebene, die sowohl die Zeigerachse (z.B. Pen-Stylus) als auch die X-Achse enthält.

PointerEvent.twist Schreibgeschützt

Die Drehung des Zeigers (z.B. Pen-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, Touch usw.).

PointerEvent.isPrimary Schreibgeschützt

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

Für die überwiegende Mehrheit der Browser, die den Mittelklick dem Öffnen eines Links in einem neuen Tab zuordnen, einschließlich Firefox, ist es möglich, dieses Verhalten zu verhindern, indem man preventDefault() innerhalb eines auxclick-Ereignishandlers aufruft.

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

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

In diesem Beispiel definieren wir Funktionen für zwei Ereignishandler — onclick und onauxclick. Der erste ändert die Farbe des Schaltflächenhintergrunds, während der zweite die Farbe des Schaltflächenvordergrunds (Text) ändert. Sie können die beiden Funktionen auch in Aktion sehen, indem Sie das Demo mit einer mehrtastigen Maus ausprobieren (live auf GitHub ansehen; auch den Quellcode ansehen).

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 mithilfe von onauxclick auch das contextmenu-Ereignis erfasst wird und preventDefault() auf dieses Ereignis aufgerufen wird, um zu verhindern, dass das Kontextmenü nach der Farbänderung angezeigt wird.

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