Element: auxclick-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onauxclick = (event) => { }

Ereignistyp

Ein PointerEvent. Erbt von MouseEvent.

Standardaktionen verhindern

Bei den meisten Browsern, die einem Klick mit der mittleren Maustaste das Öffnen eines Links in einem neuen Tab zuordnen, darunter Firefox, lässt sich dieses Verhalten unterbinden, indem preventDefault() innerhalb eines auxclick-Event-Handlers aufgerufen wird.

Wenn Sie auf auxclick-Ereignisse von Elementen reagieren, die keine Eingabe oder Navigation unterstützen, sollten Sie häufig auch andere Standardaktionen ausdrücklich verhindern, die dem Drücken der mittleren Maustaste zugeordnet sind. Unter Windows ist dies üblicherweise das automatische Scrollen, unter Linux das Einfügen aus der Zwischenablage. Dazu können Sie das Standardverhalten des Ereignisses mousedown oder pointerdown verhindern.

Möglicherweise müssen Sie außerdem verhindern, dass nach einem Rechtsklick ein System-Kontextmenü geöffnet wird. Aufgrund von Unterschieden im zeitlichen Ablauf zwischen Betriebssystemen lässt sich auch dieses Verhalten nicht als Standardaktion von auxclick verhindern. Stattdessen können Sie das Standardverhalten des Ereignisses contextmenu verhindern.

Beispiele

In diesem Beispiel definieren wir Funktionen für zwei Event-Handler: onclick und onauxclick. Ersterer ändert die Hintergrundfarbe des Buttons, letzterer die Vordergrundfarbe (Textfarbe). Sie können die beiden Funktionen auch selbst ausprobieren, indem Sie die Demo mit einer Maus mit mehreren Tasten testen (Live-Demo auf GitHub ansehen; siehe 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 neben dem Erfassen des auxclick-Ereignisses mit onauxclick auch das Ereignis contextmenu erfasst und darauf preventDefault() aufgerufen wird. Dadurch wird verhindert, dass nach der Farbänderung das Kontextmenü erscheint.

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