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 Nur lesbar Experimentell

Stellt den Winkel zwischen einer Achse eines Transducers (einem Zeiger oder Stift) und der X-Y-Ebene eines Gerätescreens dar.

PointerEvent.azimuthAngle Nur lesbar Experimentell

Stellt den Winkel zwischen der Y-Z-Ebene und der Ebene dar, die sowohl die Achse des Transducers (einem Zeiger oder Stift) als auch die Y-Achse enthält.

PointerEvent.pointerId Nur lesbar

Ein eindeutiger Bezeichner für den Zeiger, der das Ereignis verursacht.

PointerEvent.width Nur lesbar

Die Breite (Größe auf der X-Achse), in CSS-Pixeln, der Kontaktgeometrie des Zeigers.

PointerEvent.height Nur lesbar

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

PointerEvent.pressure Nur lesbar

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

PointerEvent.tangentialPressure Nur lesbar

Der normalisierte tangentiale Druck der Zeigereingabe (auch bekannt als Barrel-Druck oder Zylinderstress) im Bereich von -1 bis 1, wobei 0 die Neutralstellung der Steuerung ist.

PointerEvent.tiltX Nur lesbar

Der Ebene-Winkel (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) als auch die Y-Achse enthält.

PointerEvent.tiltY Nur lesbar

Der Ebene-Winkel (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) als auch die X-Achse enthält.

PointerEvent.twist Nur lesbar

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

PointerEvent.pointerType Nur lesbar

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

PointerEvent.isPrimary Nur lesbar

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

Für die überwiegende Mehrheit der Browser, die mit einem mittleren Klick das Öffnen eines Links in einem neuen Tab markieren, 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 von Elementen stammen, die keine Eingabe oder Navigation unterstützen, möchten Sie oft andere Standardaktionen ausdrücklich unterbinden, die der Abwärtsaktion der mittleren Maustaste zugeordnet sind. Unter Windows ist dies in der Regel das automatische Scrollen, und unter macOS und Linux ist dies in der Regel das Einfügen aus der Zwischenablage. Dies kann erreicht werden, indem das Standardverhalten des mousedown oder pointerdown Ereignisses verhindert wird.

Darüber hinaus müssen Sie möglicherweise das Öffnen eines System-Kontextmenüs nach einem Rechtsklick verhindern. Aufgrund von Timing-Unterschieden zwischen Betriebssystemen ist dies auch 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 erstere ändert die Farbe des Hintergrunds der Schaltfläche, während der letztere die Vordergrundfarbe (Text) der Schaltfläche ändert. Sie können die beiden Funktionen auch ausprobieren, indem Sie die Demo mit einer Mehrtastenmaus testen (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 zusätzlich zum Erfassen des auxclick-Ereignisses mit onauxclick auch das contextmenu Ereignis erfasst wird und preventDefault() für dieses Ereignis aufgerufen wird, um zu verhindern, dass das Kontextmenü angezeigt wird, nachdem die Farbänderung angewendet wurde.

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