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 einer Achse eines Transducers (einem Zeiger oder Stift) und der X-Y-Ebene eines Gerätescreens dar.

PointerEvent.azimuthAngle Schreibgeschützt 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 Schreibgeschützt

Ein eindeutiger Bezeichner 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 bzw. maximalen Druck darstellen, den die Hardware erkennen kann.

PointerEvent.tangentialPressure Schreibgeschützt

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 Schreibgeschützt

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 Schreibgeschützt

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 Schreibgeschützt

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 Schreibgeschützt

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

PointerEvent.isPrimary Schreibgeschützt

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