TouchEvent.shiftKey — Eigenschaft · JavaScript-Referenz

Signatur

TouchEvent.shiftKey

Beschreibung

Die Eigenschaft shiftKey eines TouchEvent ist true, wenn beim Auslösen des Events (touchstart, touchmove, touchend oder touchcancel) die Umschalttaste gedrückt war. Andernfalls ist sie false. Die Eigenschaft ist schreibgeschützt.

Nützlich ist sie auf Geräten, die Touch-Eingabe und Hardware-Tastatur kombinieren, etwa Tablets mit Tastatur-Cover oder Convertible-Laptops. Damit lassen sich Touch-Gesten mit Modifikatoren erweitern, zum Beispiel eine Mehrfachauswahl per Shift+Tippen oder eine gerade, achsengebundene Bewegung beim Ziehen mit gedrückter Umschalttaste.

Zusammen mit ctrlKey, altKey und metaKey bildet shiftKey die Modifikator-Eigenschaften des TouchEvent, genau wie bei MouseEvent und KeyboardEvent. Wenn du Maus, Stift und Touch gemeinsam behandeln willst, ist PointerEvent meist die bessere Wahl, denn dort gibt es shiftKey ebenfalls.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Umschalttaste beim Auslösen des Events gedrückt war, sonst false.

Beispiele

Shift-Zustand bei touchstart auslesen

const area = document.querySelector('#touch-area');

area.addEventListener('touchstart', (event) => {
  console.log(`Shift gedrückt: ${event.shiftKey}`);
});

Shift gedrückt: false

Mehrfachauswahl per Shift+Tippen

const selected = new Set();
const list = document.querySelector('#gallery');

const handleTap = (event) => {
  const item = event.target.closest('.item');
  if (!item) return;

  if (!event.shiftKey) {
    // Ohne Shift: bisherige Auswahl verwerfen
    selected.forEach((el) => el.classList.remove('selected'));
    selected.clear();
  }
  item.classList.add('selected');
  selected.add(item);
  console.log(`${selected.size} Element(e) ausgewählt`);
};

list.addEventListener('touchend', handleTap);

// Später wieder entfernen
// list.removeEventListener('touchend', handleTap);

2 Element(e) ausgewählt

Ziehen mit Shift auf eine Achse beschränken

const box = document.querySelector('#box');
let startX = 0;
let startY = 0;

box.addEventListener('touchstart', (e) => {
  const t = e.touches[0];
  startX = t.clientX;
  startY = t.clientY;
}, { passive: true });

box.addEventListener('touchmove', (e) => {
  e.preventDefault(); // Scrollen verhindern
  const t = e.touches[0];
  let dx = t.clientX - startX;
  let dy = t.clientY - startY;

  if (e.shiftKey) {
    // Nur die dominante Achse übernehmen
    Math.abs(dx) > Math.abs(dy) ? (dy = 0) : (dx = 0);
  }
  box.style.transform = `translate(${dx}px, ${dy}px)`;
}, { passive: false });

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

const el = document.querySelector('#target');

el.addEventListener('touchstart', (e) => {
  console.log('shiftKey:', e.shiftKey);
});

if ('TouchEvent' in window) {
  const evt = new TouchEvent('touchstart', {
    bubbles: true,
    cancelable: true,
    shiftKey: true
  });
  el.dispatchEvent(evt);
}

shiftKey: true

// Wichtig · Fallstricke

Nur mit Hardware-Tastatur sinnvoll: Auf reinen Touch-Geräten ohne physische Tastatur ist shiftKey praktisch immer false. Die Shift-Taste einer Bildschirmtastatur wird nicht gemeldet.
Schreibgeschützt: Eine Zuweisung wie event.shiftKey = true hat keine Wirkung. Für synthetische Events übergibst du den Wert im Konstruktor-Dictionary von new TouchEvent().
Browser-Unterstützung: TouchEvent gibt es in Desktop-Browsern oft nur, wenn ein Touch-Gerät erkannt wird. Firefox hat es auf dem Desktop standardmäßig lange deaktiviert. Prüfe deshalb mit 'TouchEvent' in window, ob es verfügbar ist, oder nutze PointerEvent.
Passive Listener: Wenn du in touchmove abhängig von shiftKey preventDefault() aufrufst, registriere den Listener mit { passive: false }. Sonst wird der Aufruf ignoriert und im Browser erscheint eine Warnung.
Wenn du den aktuellen Zustand einer beliebigen Modifikator-Taste abfragen willst, gibt es alternativ event.getModifierState('Shift'), sofern der Browser das unterstützt.

Siehe auch

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