MouseEvent.altKey — Eigenschaft · JavaScript-Referenz

Signatur

MouseEvent.altKey

Beschreibung

Die Eigenschaft MouseEvent.altKey ist true, wenn die Alt-Taste (unter macOS die Option-Taste ⌥) gedrückt war, während das Mausereignis ausgelöst wurde, sonst false. Sie ist schreibgeschützt und steht bei allen Ereignissen zur Verfügung, die von MouseEvent erben, also auch bei PointerEvent, WheelEvent und DragEvent.

Typische Einsatzfälle sind Modifikator-Klicks: etwa ein alternatives Verhalten beim Klicken (Element duplizieren statt verschieben, Auswahl umkehren, Detailansicht öffnen) oder beim Mausrad (feineres Zoomen). Zusammen mit ctrlKey, shiftKey und metaKey lassen sich Tastenkombinationen für die Maus abbilden.

Der Wert beschreibt den Zustand zum Zeitpunkt des Ereignisses. Wer den Zustand beliebiger Modifikatoren (z. B. AltGraph) prüfen möchte, kann alternativ event.getModifierState("Alt") verwenden.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Alt-/Option-Taste beim Ereignis gedrückt war, andernfalls false.

Beispiele

Alt-Klick erkennen

const button = document.querySelector('#aktion');

button.addEventListener('click', (event) => {
  if (event.altKey) {
    console.log('Alt-Klick: erweiterte Aktion');
  } else {
    console.log('Normaler Klick');
  }
});

Alt-Klick: erweiterte Aktion (bei gedrückter Alt-Taste)

Element per Alt-Drag duplizieren statt verschieben

const liste = document.querySelector('#liste');

liste.addEventListener('pointerdown', (event) => {
  const eintrag = event.target.closest('li');
  if (!eintrag) return;

  // Mit Alt: Kopie erzeugen, ohne Alt: Original bewegen
  const ziel = event.altKey ? eintrag.cloneNode(true) : eintrag;
  if (event.altKey) liste.append(ziel);
  ziel.classList.add('wird-gezogen');
  console.log(event.altKey ? 'Kopie erstellt' : 'Original wird verschoben');
});

Kopie erstellt

Feinzoom mit Alt + Mausrad

let zoom = 1;
const bild = document.querySelector('#bild');

bild.addEventListener('wheel', (event) => {
  event.preventDefault();
  const schritt = event.altKey ? 0.01 : 0.1; // Alt = feine Schritte
  zoom = Math.max(0.1, zoom - Math.sign(event.deltaY) * schritt);
  bild.style.transform = `scale(${zoom})`;
  console.log(`Zoom: ${zoom.toFixed(2)}`);
}, { passive: false });

Zoom: 1.01

Synthetisches Ereignis mit altKey erzeugen

const ereignis = new MouseEvent('click', { altKey: true, bubbles: true });
console.log(ereignis.altKey);

// Nachträgliches Setzen hat keine Wirkung (schreibgeschützt)
ereignis.altKey = false;
console.log(ereignis.altKey);

true true

// Wichtig · Fallstricke

Betriebssystem-Belegung: Unter Windows öffnet ein einzelner Druck auf Alt oft die Menüleiste, unter Linux ziehen viele Fenstermanager Fenster mit Alt+Drag. Solche Kombinationen erreichen die Seite eventuell gar nicht.
macOS: Die Option-Taste setzt altKey. Für die übliche Befehlstaste ⌘ ist metaKey zuständig. Option+Klick auf Links löst in Safari standardmäßig einen Download aus – bei Bedarf preventDefault() aufrufen.
AltGr: Auf Windows wird AltGr häufig als Strg+Alt gemeldet (ctrlKey und altKey sind dann beide true). Für eine genaue Unterscheidung getModifierState('AltGraph') nutzen.
Die Eigenschaft ist schreibgeschützt. Bei synthetischen Ereignissen legt man den Wert über das Init-Objekt des Konstruktors fest (new MouseEvent(type, { altKey: true })).
Barrierefreiheit: Funktionen, die nur per Alt-Klick erreichbar sind, sollten zusätzlich über Tastatur oder Menü zugänglich sein.
Die Unterstützung ist in allen modernen Browsern seit Langem gegeben.

Siehe auch

MouseEvent MouseEvent.ctrlKey MouseEvent.shiftKey MouseEvent.metaKey MouseEvent.getModifierState() KeyboardEvent.altKey MediaStreamEvent.stream