MouseEvent.ctrlKey — Eigenschaft · JavaScript-Referenz

Signatur

MouseEvent.ctrlKey

Beschreibung

MouseEvent.ctrlKey ist eine schreibgeschützte Eigenschaft, die true liefert, wenn die Strg-Taste (engl. Control) gedrückt war, während das Mausereignis ausgelöst wurde, sonst false. Sie steht bei allen Ereignissen zur Verfügung, die von MouseEvent erben, also auch bei PointerEvent, WheelEvent und DragEvent.

Typische Einsatzgebiete sind Mehrfachauswahl in Listen und Tabellen (Strg+Klick), Zoomen per Strg+Mausrad in Karten- oder Grafik-Anwendungen sowie alternative Aktionen bei Links, etwa „in neuem Tab öffnen“.

Auf macOS entspricht die übliche Befehlstaste nicht ctrlKey, sondern metaKey (⌘). Für plattformübergreifende Tastenkombinationen prüft man daher meist event.ctrlKey || event.metaKey. Zudem löst Strg+Klick auf macOS häufig das Kontextmenü (contextmenu) statt eines normalen click aus.

Beispiele

Strg+Klick erkennen

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

button.addEventListener('click', (event) => {
  if (event.ctrlKey) {
    console.log('Klick mit gedrückter Strg-Taste');
  } else {
    console.log('Normaler Klick');
  }
});

Klick mit gedrückter Strg-Taste

Mehrfachauswahl in einer Liste (plattformübergreifend)

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

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

  // Strg unter Windows/Linux, ⌘ unter macOS
  const zusatz = event.ctrlKey || event.metaKey;

  if (!zusatz) {
    liste.querySelectorAll('li.ausgewaehlt')
      .forEach((li) => li.classList.remove('ausgewaehlt'));
  }
  eintrag.classList.toggle('ausgewaehlt');

  const anzahl = liste.querySelectorAll('li.ausgewaehlt').length;
  console.log(`${anzahl} Eintrag/Einträge ausgewählt`);
});

2 Eintrag/Einträge ausgewählt

Zoomen mit Strg+Mausrad

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

karte.addEventListener('wheel', (event) => {
  if (!event.ctrlKey) return; // normales Scrollen zulassen

  event.preventDefault(); // Browser-Zoom verhindern
  zoom = Math.min(5, Math.max(0.5, zoom - event.deltaY * 0.001));
  karte.style.transform = `scale(${zoom})`;
  console.log('Zoom:', zoom.toFixed(2));
}, { passive: false });

Zoom: 1.10

Synthetisches Ereignis mit ctrlKey erzeugen

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

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

true true

// Wichtig · Fallstricke

macOS: Die übliche Befehlstaste ist ⌘, gemeldet über metaKey. Strg+Klick öffnet dort meist das Kontextmenü; ein click-Ereignis mit ctrlKey === true kommt dann oft gar nicht an.
Schreibgeschützt: Zuweisungen werden stillschweigend ignoriert (im Strict Mode wird ein TypeError geworfen). Für Tests setzt man den Wert über das Init-Objekt von new MouseEvent().
Touchpad-Pinch-Gesten werden in Chrome, Edge und Firefox als wheel-Ereignisse mit ctrlKey === true gemeldet, auch wenn gar keine Taste gedrückt ist. Das ist praktisch für Zoom-Funktionen, kann bei anderer Logik aber verwirren.
Strg+Klick auf Links öffnet im Browser standardmäßig einen neuen Tab. Wer das mit preventDefault() unterdrückt, verschlechtert die Bedienbarkeit.
Ein Listener, der preventDefault() bei wheel aufruft, muss mit { passive: false } registriert werden.
Für mehrere Modifikatortasten gibt es auch getModifierState('Control').
Die Eigenschaft wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

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