Element: auxclick — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("auxclick", handler)

Beschreibung

Das Ereignis auxclick ist das Gegenstück zu click für alle nicht-primären Tasten eines Zeigegeräts. Es wird ausgelöst, wenn eine solche Taste innerhalb desselben Elements gedrückt und wieder losgelassen wurde, also nach mousedown und mouseup. Meist ist das die mittlere Maustaste (Mausrad-Klick, event.button === 1), aber auch die rechte Taste (button === 2) sowie die Zusatztasten „Zurück“/„Vor“ (button === 3/4) können es auslösen.

Das Ereignis ist ein PointerEvent (ältere Browser: MouseEvent), es steigt im DOM auf (bubbles) und kann abgebrochen werden (cancelable). Registrieren lässt es sich per element.addEventListener("auxclick", handler) oder über die Eigenschaft element.onauxclick = handler.

Typische Einsatzfälle sind: Mittelklick auf eigene Link-Komponenten (z. B. „in neuem Tab öffnen“ bei per JavaScript gerouteten Links), Tabs per Mittelklick schließen (wie im Browser), oder spezielle Aktionen in Editoren und Spielen. Mit event.button prüft man, welche Taste gedrückt wurde.

Wichtig: Das Standardverhalten des Mittelklicks (Autoscroll bzw. Einfügen unter Linux) wird bereits bei mousedown gestartet. Wer es unterdrücken will, muss preventDefault() im mousedown-Handler aufrufen, nicht erst in auxclick.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"auxclick"`.
$handler Pflicht	(event: PointerEvent) => void		Callback, der ein `PointerEvent` erhält. Wichtige Eigenschaften: `button`, `buttons`, `clientX`/`clientY`, `ctrlKey`, `shiftKey`, `target`.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `capture`, `once`, `passive` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler empfängt ein PointerEvent (in älteren Browsern ein MouseEvent).

Beispiele

Mittelklick auf einen Tab schließt ihn

// HTML: <ul id="tabs"><li>Start</li><li>Profil</li><li>Einstellungen</li></ul>
const tabs = document.querySelector('#tabs');

tabs.addEventListener('auxclick', (event) => {
  // Nur mittlere Maustaste (Mausrad)
  if (event.button !== 1) return;
  const tab = event.target.closest('li');
  if (!tab) return;
  console.log(`Tab "${tab.textContent}" geschlossen`);
  tab.remove();
});

// Autoscroll beim Mittelklick unterdrücken – muss in mousedown passieren
tabs.addEventListener('mousedown', (event) => {
  if (event.button === 1) event.preventDefault();
});

Tab "Profil" geschlossen

SPA-Link: Mittelklick öffnet neuen Tab, Linksklick routet intern

const link = document.querySelector('#produkt-link'); // <span data-href="/produkt/42">

link.addEventListener('click', () => {
  history.pushState({}, '', link.dataset.href);
  console.log('Intern navigiert zu', link.dataset.href);
});

link.addEventListener('auxclick', (event) => {
  if (event.button === 1) {
    window.open(link.dataset.href, '_blank', 'noopener');
    console.log('Neuer Tab geöffnet');
  }
});

Neuer Tab geöffnet

Welche Taste? Mit onauxclick-Property und Entfernen

const box = document.querySelector('#box');
const namen = { 1: 'Mitte', 2: 'Rechts', 3: 'Zurück', 4: 'Vor' };

box.onauxclick = (event) => {
  console.log(`auxclick mit Taste: ${namen[event.button] ?? event.button}`);
};

// Kontextmenü unterdrücken, damit Rechtsklick sauber ausgewertet werden kann
box.addEventListener('contextmenu', (e) => e.preventDefault());

// Nach 10 Sekunden wieder abmelden
setTimeout(() => {
  box.onauxclick = null;
  console.log('auxclick-Handler entfernt');
}, 10_000);

auxclick mit Taste: Mitte auxclick mit Taste: Rechts auxclick-Handler entfernt

Listener per AbortController entfernen

const controller = new AbortController();
const handler = (e) => console.log('Zusatzklick bei', e.clientX, e.clientY);

document.addEventListener('auxclick', handler, { signal: controller.signal });

// Später: alternativ document.removeEventListener('auxclick', handler)
controller.abort();

// Wichtig · Fallstricke

Standardverhalten verhindern: Autoscroll bzw. Einfügen aus der Zwischenablage (Linux/X11) beim Mittelklick startet schon bei mousedown. preventDefault() in auxclick kommt dafür zu spät, deshalb in mousedown aufrufen.
Rechtsklick: Bei der rechten Taste wird je nach Browser und Betriebssystem zuerst (oder statt) contextmenu ausgelöst. Öffnet sich das Kontextmenü, kommt auxclick teilweise gar nicht an. Deshalb für eigene Rechtsklick-Menüs lieber contextmenu verwenden.
Echte Links: Bei einem echten <a href> öffnet der Browser beim Mittelklick selbst einen neuen Tab. Das eigene Nachbauen ist nur bei Pseudo-Links nötig. Besser gleich echte Links verwenden, das ist auch für die Barrierefreiheit günstiger.
Immer event.button prüfen, denn das Ereignis gilt für alle nicht-primären Tasten. Bei Linkshänder-Einstellungen vertauscht das Betriebssystem die Tasten, button bezieht sich dann auf die logische Taste.
Auf Touch-Geräten gibt es in der Regel keine Zusatztasten, also sollte keine wichtige Funktion allein an auxclick hängen.
Kompatibilität: Chrome 55+, Edge 79+ und Firefox 53+ unterstützen das Ereignis schon lange. Safari erst ab 18.2, ältere Safari-Versionen brauchen einen Ersatz über mouseup mit event.button !== 0. Neuere Browser liefern ein PointerEvent statt eines MouseEvent.

Siehe auch

MouseEvent.button PointerEvent EventTarget.addEventListener() Element: click Element: dblclick