Dasauxclick Ereignis wird auf einemElement ausgelöst, wenn eine Taste eines Zeigegeräts, die nicht die primäre Taste ist (also jede Maustaste außer der primären—normalerweise am weitesten links gelegenen—Taste), gedrückt und losgelassen wird, und zwar innerhalb desselben Elements.

auxclick wird ausgelöst, nachdem die Ereignissemousedown undmouseup in dieser Reihenfolge ausgelöst wurden.

Syntax

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

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

Ereignistyp

EinPointerEvent. Erbt vonMouseEvent.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften vonMouseEvent undEvent.

PointerEvent.altitudeAngleSchreibgeschütztExperimentell

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

PointerEvent.azimuthAngleSchreibgeschütztExperimentell

Repräsentiert den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Transducer-Achse (ein Zeiger oder Stift) als auch die Y-Achse enthält.

PointerEvent.pointerIdSchreibgeschützt

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

PointerEvent.widthSchreibgeschützt

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

PointerEvent.heightSchreibgeschützt

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

PointerEvent.pressureSchreibgeschützt

Der normalisierte Druck des Zeigereingangs im Bereich von0 bis1, wobei0 und1 den minimalen und maximalen Druck darstellen, den die Hardware erkennen kann.

PointerEvent.tangentialPressureSchreibgeschützt

Der normalisierte tangentiale Druck des Zeigereingangs (auch bekannt als Fassdruck oderZylinderstress) im Bereich von-1 bis1, wobei0 die Neutralstellung der Kontrolle ist.

PointerEvent.tiltXSchreibgeschützt

Der Ebenenwinkel (in Grad, im Bereich von-90 bis90) zwischen der Y-Z-Ebene und der Ebene, die sowohl die Zeigerachse (z.B. ein Stift) als auch die Y-Achse enthält.

PointerEvent.tiltYSchreibgeschützt

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

PointerEvent.twistSchreibgeschützt

Die Drehung des Zeigers im Uhrzeigersinn (z.B. ein Stift) um seine Hauptachse in Grad, mit einem Wert im Bereich von0 bis359.

PointerEvent.pointerTypeSchreibgeschützt

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

PointerEvent.isPrimarySchreibgeschützt

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

Standardaktionen verhindern

Für die überwiegende Mehrheit der Browser, die einen Mittelklick darauf abbilden, einen Link in einem neuen Tab zu öffnen, einschließlich Firefox, ist es möglich, dieses Verhalten zu verhindern, indempreventDefault() innerhalb einesauxclick-Ereignis-Handlers aufgerufen wird.

Wenn Sieauxclick-Ereignisse überwachen, die auf Elemente zurückzuführen sind, die keine Eingabe oder Navigation unterstützen, sollten Sie oft ausdrücklich andere Standardaktionen verhindern, die dem Drücken der mittleren Maustaste zugewiesen sind. Unter Windows ist dies normalerweise der automatische Bildlauf, und unter macOS und Linux handelt es sich normalerweise um das Einfügen der Zwischenablage. Dies kann erreicht werden, indem das Standardverhalten desmousedown oderpointerdown Ereignisses verhindert wird.

Darüber hinaus müssen Sie möglicherweise verhindern, dass nach einem Rechtsklick ein Systemkontextmenü geöffnet wird. Aufgrund von zeitlichen Unterschieden zwischen Betriebssystemen ist dies ebenfalls kein verhinderbares Standardverhalten vonauxclick. Stattdessen kann dies durch Verhinderung des Standardverhaltens descontextmenu Ereignisses erreicht werden.

Beispiele

In diesem Beispiel definieren wir Funktionen für zwei Ereignis-Handler —onclick undonauxclick. Der erste ändert die Farbe des Schaltflächenhintergrunds, während der zweite die Textfarbe der Schaltfläche ändert. Sie können die beiden Funktionen auch in Aktion sehen, indem Sie das Demo mit einer Mehrtasten-Maus ausprobieren (siehe es live auf GitHub; auchden Quellcode ansehen).

JavaScript

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 desauxclick-Ereignisses mitonauxclick auch dascontextmenu Ereignis erfasst wird undpreventDefault() auf dieses Ereignis angewendet wird, um zu verhindern, dass das Kontextmenü nach der Farbänderung angezeigt wird.

HTML

<button>Click me!</button>

html {  height: 100%;  overflow: hidden;}body {  height: inherit;  display: flex;  justify-content: center;  align-items: center;  margin: 0;}button {  border: 0;  background-color: white;  font-size: 8vw;  display: block;  width: 100%;  height: 100%;  letter-spacing: 0.5rem;}

Spezifikationen

Browser-Kompatibilität

Siehe auch

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