Element: auxclick Ereignis

Syntax

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

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

onauxclick = (event) => { }

Ereignistyp

Ein PointerEvent. Erbt von MouseEvent.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell

Repräsentiert den Winkel zwischen einer Transducer-Achse (ein Zeiger oder Stift) 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 (ein Zeiger oder Stift) 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 (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 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 bekannt als Fassdruck oder Zylinderstress) im Bereich von -1 bis 1, wobei 0 die Neutralstellung der Kontrolle ist.

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. ein Stift) 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. ein Stift) als auch die X-Achse enthält.

PointerEvent.twist Schreibgeschützt

Die Drehung des Zeigers im Uhrzeigersinn (z.B. ein Stift) 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, etc.).

PointerEvent.isPrimary Schreibgeschü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, indem preventDefault() innerhalb eines auxclick-Ereignis-Handlers aufgerufen wird.

Wenn Sie auxclick-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 des mousedown oder pointerdown 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 von auxclick. Stattdessen kann dies durch Verhinderung des Standardverhaltens des contextmenu Ereignisses erreicht werden.

Beispiele

In diesem Beispiel definieren wir Funktionen für zwei Ereignis-Handler — onclick und onauxclick. 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; auch den 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 des auxclick-Ereignisses mit onauxclick auch das contextmenu Ereignis erfasst wird und preventDefault() 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