TouchEvent.ctrlKey — Eigenschaft · JavaScript-Referenz

Signatur

TouchEvent.ctrlKey

Beschreibung

Die Eigenschaft ctrlKey der Schnittstelle TouchEvent ist schreibgeschützt. Sie ist true, wenn die Strg-Taste (Control) gedrückt war, als das Ereignis erzeugt wurde, sonst false. Sie funktioniert genauso wie die gleichnamigen Eigenschaften von MouseEvent und KeyboardEvent.

Gebraucht wird sie vor allem auf Geräten mit Touchscreen und Tastatur, etwa Convertibles, Tablets mit angedockter Tastatur oder Touch-Laptops. Dort kann man eine Geste mit Modifikator anders auswerten als ohne, zum Beispiel Strg + Tippen für Mehrfachauswahl oder Strg + Ziehen zum Kopieren statt Verschieben.

Der Wert gilt für das ganze Ereignis, nicht für einzelne Berührungspunkte in touches bzw. changedTouches. Zusammen mit shiftKey, altKey und metaKey beschreibt er den vollständigen Zustand der Modifikatortasten.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn beim Auslösen des Ereignisses die Strg-Taste gedrückt war, sonst false.

Beispiele

Strg-Status beim Berühren protokollieren

const flaeche = document.querySelector('#zeichenflaeche');

flaeche.addEventListener('touchstart', (event) => {
  console.log(`Strg gedrückt: ${event.ctrlKey}`);
});

Strg gedrückt: false

Mehrfachauswahl mit Strg + Tippen

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

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

  if (event.ctrlKey) {
    // Auswahl umschalten, andere Einträge bleiben ausgewählt
    eintrag.classList.toggle('ausgewaehlt');
  } else {
    // Einzelauswahl: zuerst alle anderen abwählen
    liste.querySelectorAll('li.ausgewaehlt')
      .forEach((li) => li.classList.remove('ausgewaehlt'));
    eintrag.classList.add('ausgewaehlt');
  }
});

Synthetisches TouchEvent mit ctrlKey erzeugen (z. B. für Tests)

const ziel = document.body;

ziel.addEventListener('touchstart', (e) => {
  console.log('ctrlKey:', e.ctrlKey);
}, { once: true });

if ('TouchEvent' in window) {
  const ereignis = new TouchEvent('touchstart', {
    bubbles: true,
    cancelable: true,
    ctrlKey: true
  });
  ziel.dispatchEvent(ereignis);
}

ctrlKey: true

Alle Modifikatoren gemeinsam auswerten

document.addEventListener('touchstart', ({ ctrlKey, shiftKey, altKey, metaKey }) => {
  const aktiv = Object.entries({ ctrlKey, shiftKey, altKey, metaKey })
    .filter(([, gedrueckt]) => gedrueckt)
    .map(([name]) => name);
  console.log(aktiv.length ? `Modifikatoren: ${aktiv.join(', ')}` : 'Keine Modifikatoren');
}, { passive: true });

Keine Modifikatoren

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie event.ctrlKey = true hat keine Wirkung. Den Wert kann man nur beim Erzeugen über das Init-Objekt von new TouchEvent() setzen.
Ohne Tastatur immer false: Auf reinen Smartphones und Tablets ohne Hardware-Tastatur ist der Wert praktisch immer false. Wichtige Funktionen sollten deshalb nicht nur über Strg + Berührung erreichbar sein.
macOS/iOS: Auf Apple-Systemen ist die übliche Modifikatortaste Cmd. Diese meldet metaKey, nicht ctrlKey. Für plattformübergreifendes Verhalten prüft man oft e.ctrlKey || e.metaKey.
Kompatibilität: TouchEvent gibt es in Chrome, Edge, Firefox (auf Desktop-Systemen teils nur mit Touch-Hardware) sowie in Safari auf iOS/iPadOS, aber nicht in Desktop-Safari. Vor dem Einsatz mit 'TouchEvent' in window prüfen. Für Maus, Stift und Touch zusammen sind PointerEvents meist die bessere Wahl; sie bieten ebenfalls ctrlKey.
Verwendet man in touchstart bzw. touchmove preventDefault(), darf der Listener nicht als passive registriert sein.

Siehe auch

TouchEvent TouchEvent.shiftKey TouchEvent.altKey TouchEvent.metaKey MouseEvent.ctrlKey KeyboardEvent.ctrlKey PointerEvent