Element: auxclick Event

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.

Verhindern von Standardaktionen

Für die überwiegende Mehrheit der Browser, die den Mittelclick mit dem Öffnen eines Links in einem neuen Tab verknüpfen, einschließlich Firefox, ist es möglich, dieses Verhalten durch den Aufruf von preventDefault() innerhalb eines auxclick-Ereignishandlers zu verhindern.

Wenn Sie auxclick-Ereignisse überwachen, die von Elementen ausgehen, die keine Eingabe oder Navigation unterstützen, möchten Sie oft explizit andere Standardaktionen verhindern, die dem Drücken der mittleren Maustaste zugeordnet sind. Unter Windows ist dies normalerweise das automatische Scrollen, unter Linux das Einfügen aus der Zwischenablage. Dies kann durch Verhindern des Standardverhaltens des mousedown- oder pointerdown-Ereignisses erreicht werden.

Zusätzlich müssen Sie möglicherweise das Öffnen eines System-Kontextmenüs nach einem Rechtsklick vermeiden. Aufgrund von Zeitunterschieden zwischen Betriebssystemen ist dies ebenfalls kein verhinderbares Standardverhalten von auxclick. Stattdessen kann dies durch Verhindern des Standardverhaltens des contextmenu-Ereignisses geschehen.

Beispiele

In diesem Beispiel definieren wir Funktionen für zwei Ereignis-Handler — onclick und onauxclick. Der erstere ändert die Hintergrundfarbe des Buttons, während der letztere die Vordergrundfarbe (Text) ändert. Sie können die beiden Funktionen auch in Aktion sehen, indem Sie das Demo mit einer Multi-Button-Maus ausprobieren (siehe es live auf GitHub; auch sehen Sie 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() für dieses Ereignis aufgerufen 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