Element: auxclick Event

Syntax

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

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

onauxclick = (event) => { }

Ereignistyp

Ein PointerEvent. Erbt von MouseEvent.

Verhindern von Standardaktionen

Bei der großen Mehrheit der Browser, die den Mittelklick zum Öffnen eines Links in einem neuen Tab abbilden, einschließlich Firefox, ist es möglich, dieses Verhalten zu unterbinden, indem preventDefault() innerhalb eines auxclick-Ereignishandlers aufgerufen wird.

Wenn Sie auxclick-Ereignisse überwachen, die von Elementen stammen, die keine Eingabe oder Navigation unterstützen, möchten Sie oft explizit andere Standardaktionen verhindern, die der Runter-Aktion der mittleren Maustaste zugeordnet sind. Unter Windows ist dies normalerweise das Autoscrolling, unter macOS und Linux ist dies häufig das Einfügen der Zwischenablage. Dies kann erreicht werden, indem das Standardverhalten des mousedown oder pointerdown Ereignisses verhindert wird.

Zusätzlich sollten Sie das Öffnen eines Systemkontextmenüs nach einem Rechtsklick vermeiden. Aufgrund von Zeitunterschieden zwischen Betriebssystemen ist auch dies kein standardmäßiges, durch auxclick verhinderbares Verhalten. Stattdessen kann dies durch das Verhindern des Standardverhaltens des contextmenu Ereignisses erreicht werden.

Beispiele

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

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() bei diesem Ereignis aufgerufen wird, um zu verhindern, dass das Kontextmenü nach dem Farbwechsel auftaucht.

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

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