Signatur
Beschreibung
Die schreibgeschützte Eigenschaft metaKey des TouchEvent-Interfaces gibt true zurück, wenn beim Auslösen des Touch-Ereignisses (touchstart, touchmove, touchend, touchcancel) die Meta-Taste gedrückt war, sonst false. Auf macOS entspricht die Meta-Taste der Befehlstaste (⌘), auf Windows meist der Windows-Taste (⊞).
Relevant ist die Eigenschaft vor allem auf Geräten, die Touch-Eingabe und eine physische Tastatur haben, etwa Convertibles, Tablets mit Tastatur-Cover oder Touch-Monitore am Desktop. Damit lassen sich Tastenkombinationen wie „⌘ + Tippen“ für Mehrfachauswahl oder „in neuem Tab öffnen“ umsetzen, wie man es von Mausklicks mit MouseEvent.metaKey kennt.
Zusammen mit altKey, ctrlKey und shiftKey beschreibt metaKey den Zustand der Modifikatortasten zum Zeitpunkt des Ereignisses. Da reine Touch-Geräte meist keine Tastatur haben, ist der Wert dort praktisch immer false. Code sollte sich deshalb nie allein auf diese Eigenschaft verlassen.
Rückgabewert
true, wenn die Meta-Taste beim Auslösen des Ereignisses gedrückt war, sonst false.Beispiele
Meta-Taste bei touchstart abfragen
const flaeche = document.querySelector('#zeichenflaeche');
flaeche.addEventListener('touchstart', (event) => {
console.log('Meta-Taste gedrückt:', event.metaKey);
}, { passive: true });Mehrfachauswahl mit ⌘/⊞ + Tippen
const liste = document.querySelector('#dateiliste');
liste.addEventListener('touchend', (event) => {
const eintrag = event.target.closest('li');
if (!eintrag) return;
if (event.metaKey || event.ctrlKey) {
// Auswahl erweitern bzw. umschalten
eintrag.classList.toggle('ausgewaehlt');
} else {
// Einfachauswahl: vorherige Auswahl aufheben
liste.querySelectorAll('.ausgewaehlt')
.forEach((el) => el.classList.remove('ausgewaehlt'));
eintrag.classList.add('ausgewaehlt');
}
});Synthetisches TouchEvent mit metaKey erzeugen (z. B. für Tests)
const ziel = document.querySelector('#button');
ziel.addEventListener('touchstart', (e) => {
console.log('metaKey:', e.metaKey);
});
if ('TouchEvent' in window) {
const touch = new Touch({ identifier: 1, target: ziel, clientX: 10, clientY: 10 });
const event = new TouchEvent('touchstart', {
touches: [touch],
targetTouches: [touch],
changedTouches: [touch],
metaKey: true,
bubbles: true,
cancelable: true
});
ziel.dispatchEvent(event);
}// Wichtig · Fallstricke
- Nur lesbar: Eine Zuweisung wie
event.metaKey = truehat keine Wirkung. Für eigene Ereignisse übergibt man den Wert im Optionsobjekt vonnew TouchEvent(type, { metaKey: true }). - Kein Tastatur-Ersatz: Auf reinen Touch-Geräten ohne Tastatur ist der Wert immer
false. Wichtige Funktionen sollten zusätzlich per Langdruck, Kontextmenü oder Schaltfläche erreichbar sein. - Plattformunterschiede: Das Betriebssystem kann die Meta-Taste abfangen (z. B. öffnet die Windows-Taste das Startmenü). Für plattformübergreifende Kombinationen deshalb meist
event.metaKey || event.ctrlKeyprüfen. - Browser-Unterstützung:
TouchEventgibt es vor allem in mobilen Browsern und in Chromium-Browsern auf Touch-Hardware. Desktop-Firefox und Desktop-Safari stellenTouchEventstandardmäßig oft nicht bereit, daher vorher mit'TouchEvent' in windowprüfen. Für neue Projekte sindPointerEvents meist die bessere Wahl. Sie erbenmetaKeyvonMouseEventund funktionieren für Maus, Stift und Touch.