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, in denen ein Mittelklick einen Link in einem neuen Tab öffnet, einschließlich Firefox, lässt sich dieses Verhalten verhindern, indem preventDefault() innerhalb eines auxclick-Event-Handlers aufgerufen wird.

Wenn Sie auf auxclick-Ereignisse von Elementen reagieren, die weder Eingaben noch 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 Systemkontextmenü geöffnet wird. Aufgrund unterschiedlicher zeitlicher Abläufe in den 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 seine Vordergrundfarbe (Textfarbe). Sie können die beiden Funktionen auch mit einer Maus mit mehreren Tasten in der Demo ausprobieren (Live-Demo auf GitHub; siehe auch den Quellcode).

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;
}

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 auxclick-Ereignis über onauxclick auch das Ereignis contextmenu erfasst wird. Für dieses Ereignis wird preventDefault() aufgerufen, damit nach der Farbänderung kein Kontextmenü erscheint.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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