Signatur
Beschreibung
Die Eigenschaft metaKey eines MouseEvent ist true, wenn beim Auslösen des Ereignisses (z. B. click, mousedown, contextmenu) die Meta-Taste gedrückt war, sonst false. Unter macOS ist das die Befehlstaste (⌘ Cmd), unter Windows meist die Windows-Taste (⊞). Unter Linux hängt es von der Desktop-Umgebung ab (oft die „Super“-Taste).
Praktisch nutzt man metaKey vor allem, um plattformübliche Tastenkürzel nachzubilden: Unter macOS entspricht ⌘+Klick dem Windows-/Linux-Verhalten von Strg+Klick – etwa zum Öffnen eines Links in einem neuen Tab oder für eine Mehrfachauswahl in Listen. Deshalb prüft man in der Regel event.metaKey || event.ctrlKey gemeinsam.
Da metaKey von UIEvent-basierten Mausereignissen geerbt wird, steht sie auch in PointerEvent, WheelEvent und DragEvent zur Verfügung. Für synthetische Ereignisse kann der Wert über das Options-Objekt des Konstruktors (new MouseEvent('click', { metaKey: true })) gesetzt werden; nachträglich ist er schreibgeschützt.
Rückgabewert
true, wenn die Meta-Taste zum Zeitpunkt des Ereignisses gedrückt war, sonst false.Beispiele
Meta-Taste beim Klick erkennen
document.addEventListener('click', (event) => {
if (event.metaKey) {
console.log('Klick mit gedrückter Meta-Taste');
} else {
console.log('Normaler Klick');
}
});Plattformübergreifende Mehrfachauswahl (⌘ bzw. Strg)
const list = document.querySelector('#dateiliste');
list.addEventListener('click', (event) => {
const item = event.target.closest('li');
if (!item) return;
// macOS: ⌘+Klick, Windows/Linux: Strg+Klick
const toggle = event.metaKey || event.ctrlKey;
if (!toggle) {
list.querySelectorAll('li.selected')
.forEach((li) => li.classList.remove('selected'));
}
item.classList.toggle('selected');
console.log('Ausgewählt:', list.querySelectorAll('li.selected').length);
});Eigene Link-Navigation, ⌘/Strg-Klick dem Browser überlassen
document.querySelectorAll('a.spa-link').forEach((link) => {
link.addEventListener('click', (event) => {
// Neuer Tab gewünscht? Dann Standardverhalten nicht verhindern
if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) {
return;
}
event.preventDefault();
history.pushState({}, '', link.href);
console.log('Client-seitig navigiert zu', link.pathname);
});
});Synthetisches Ereignis mit metaKey erzeugen
const button = document.createElement('button');
button.addEventListener('click', (e) => console.log('metaKey:', e.metaKey));
button.dispatchEvent(new MouseEvent('click', { metaKey: true, bubbles: true }));
button.dispatchEvent(new MouseEvent('click'));// Wichtig · Fallstricke
- Plattformunterschiede: Unter Windows fängt das Betriebssystem die Windows-Taste oft selbst ab (Startmenü, Tastenkürzel).
metaKeyist daher dort unzuverlässig. Für Kürzel, die auf allen Plattformen funktionieren sollen, immerevent.metaKey || event.ctrlKeyprüfen. - macOS und Strg+Klick: Unter macOS löst Strg+Klick ein
contextmenu-Ereignis aus. Mehrfachauswahl sollte deshalb dort übermetaKeylaufen. - Nicht mit der Alt-Taste verwechseln: Die Wahltaste (⌥ Option) unter macOS wird über
altKeygemeldet, nicht übermetaKey. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie
event.metaKey = truewird stillschweigend ignoriert (im Strict Mode gibt es einenTypeError). - Für einen allgemeineren Abfrageweg gibt es
event.getModifierState('Meta'). Diese Methode kennt auch Zustände wie'CapsLock'. - Kompatibilität: wird von allen modernen Browsern unterstützt. Ältere Linux-Browser meldeten die Super-Taste teilweise als
'OS'statt als'Meta'.