Signatur
Beschreibung
Die Eigenschaft shiftKey eines MouseEvent zeigt an, ob die Umschalttaste (Shift) in dem Moment gedrückt war, in dem das Mausereignis ausgelöst wurde. Sie ist schreibgeschützt und steht bei allen von MouseEvent abgeleiteten Ereignissen zur Verfügung, also auch bei PointerEvent, WheelEvent und DragEvent.
Typische Einsatzfälle sind Mehrfachauswahl mit Bereichen (Shift+Klick markiert alle Einträge zwischen dem zuletzt gewählten und dem aktuellen), alternative Aktionen (z. B. Shift+Klick öffnet einen Link in einem neuen Fenster) sowie eingeschränkte Bewegungen in Zeichen- oder Grafikanwendungen (Shift beim Ziehen hält das Seitenverhältnis fest oder richtet an Achsen aus).
Oft wird shiftKey zusammen mit ctrlKey, altKey und metaKey ausgewertet, um Tastenkombinationen zu unterscheiden. Der Wert beschreibt nur den Zustand zum Zeitpunkt des Ereignisses; um den Zustand anderer Modifikatortasten wie CapsLock abzufragen, verwendet man getModifierState().
Rückgabewert
true, wenn die Umschalttaste beim Auslösen des Ereignisses gedrückt war, sonst false.Beispiele
Shift+Klick erkennen
const button = document.querySelector('#aktion');
button.addEventListener('click', (event) => {
if (event.shiftKey) {
console.log('Klick mit gedrückter Umschalttaste');
} else {
console.log('Normaler Klick');
}
});Bereichsauswahl in einer Liste per Shift+Klick
const items = [...document.querySelectorAll('#liste li')];
let letzterIndex = null;
items.forEach((item, index) => {
item.addEventListener('click', (event) => {
if (event.shiftKey && letzterIndex !== null) {
const [start, ende] = [letzterIndex, index].sort((a, b) => a - b);
items.slice(start, ende + 1).forEach((el) => el.classList.add('ausgewaehlt'));
} else {
item.classList.toggle('ausgewaehlt');
}
letzterIndex = index;
});
});Tastenkombinationen mit anderen Modifikatoren kombinieren
document.addEventListener('mousedown', (event) => {
const modifikatoren = [
event.ctrlKey && 'Strg',
event.altKey && 'Alt',
event.shiftKey && 'Shift',
event.metaKey && 'Meta'
].filter(Boolean);
console.log(`Maustaste ${event.button} mit: ${modifikatoren.join('+') || 'keinen Modifikatoren'}`);
});Synthetisches Ereignis mit shiftKey erzeugen
const ziel = document.body;
ziel.addEventListener('click', (e) => console.log('shiftKey:', e.shiftKey));
const klick = new MouseEvent('click', { bubbles: true, shiftKey: true });
ziel.dispatchEvent(klick);// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
event.shiftKey = truehat keine Wirkung. Für Tests setzt man den Wert über das Options-Objekt des Konstruktorsnew MouseEvent(type, { shiftKey: true }). - Textauswahl: Shift+Klick erweitert im Browser standardmäßig die Textauswahl. Wer Shift+Klick für eigene Aktionen verwendet, sollte gegebenenfalls im
mousedown-Handlerevent.preventDefault()aufrufen oder per CSSuser-select: nonesetzen. - Browser-Vorgaben: Shift+Klick auf Links öffnet in vielen Browsern ein neues Fenster; Shift+Mausrad scrollt oft horizontal (und kann bei
WheelEventdeltaXstattdeltaYliefern). - Barrierefreiheit: Funktionen, die nur per Shift+Klick erreichbar sind, sollten auch per Tastatur oder Kontextmenü zugänglich sein.
- Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt.