JavaScript MouseEvent shiftKey Property

What You’ll Learn

MouseEvent.shiftKey is a read-only boolean: true if Shift was held when the mouse event fired. Learn Shift+click patterns, how it sits next to other modifiers, synthetic events, and five try-it labs.

Introduction

Shift+click is a classic “extend selection” / alternate-action pattern in lists, file pickers, and toolbars. That key state is exposed as shiftKey on every mouse event.

element.addEventListener("click", (event) => {
  console.log(event.shiftKey); // true or false
});

Understanding the Property

MDN: MouseEvent.shiftKey is a read-only boolean that indicates whether the shift key was pressed when a given mouse event occurred.

• Instance — read event.shiftKey inside a handler.
• Boolean — true pressed, false not pressed.
• Read-only — set via constructor options on synthetic events.
• Independent — works alongside Ctrl, Alt, and Meta flags.

📝 Syntax

const isShiftHeld = mouseEvent.shiftKey;

Value

A boolean: true if Shift was held during the event; otherwise false.

Setting it on synthetic events

const event = new MouseEvent("click", {
  shiftKey: true,
  bubbles: true
});
console.log(event.shiftKey); // true

⚖️ Related Modifier Properties

You can also call event.getModifierState("Shift") for a related check.

Examples Gallery

Examples follow MDN MouseEvent.shiftKey. Hold Shift while clicking to see true.

const log = document.querySelector("#log");

document.addEventListener("click", (e) => {
  log.textContent = `The shift key is pressed: ${e.shiftKey}`;
});

The shift key is pressed: false

item.addEventListener("click", (e) => {
  if (e.shiftKey) {
    console.log("Shift+click — extend selection");
    return;
  }
  console.log("Normal click — select one item");
});

Normal click — select one item

const event = new MouseEvent("click", {
  shiftKey: true,
  bubbles: true
});

console.log(event.shiftKey);     // true
console.log(event.type);         // "click"
console.log(event instanceof MouseEvent); // true

true
click
true

document.addEventListener("click", (e) => {
  console.log({
    shiftKey: e.shiftKey,
    ctrlKey: e.ctrlKey,
    altKey: e.altKey,
    metaKey: e.metaKey
  });
});

{
  shiftKey: false,
  ctrlKey: false,
  altKey: false,
  metaKey: false
}

const event = new MouseEvent("click", { shiftKey: true });

console.log(event.shiftKey);                    // true
console.log(event.getModifierState("Shift"));    // true
console.log(event.shiftKey === event.getModifierState("Shift")); // true

true
true
true

🚀 Common Use Cases

• Shift+click range selection in lists, tables, and file trees.
• Alternate toolbar or canvas actions while Shift is held.
• Unit tests that construct MouseEvent with shiftKey: true.
• Combining Shift with ctrlKey or metaKey for multi-modifier shortcuts.
• Teaching the modifier family next to Alt and Meta.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Either physical Shift key sets shiftKey to true.
• Independent of ctrlKey, altKey, and metaKey.
• Related: screenY, MouseEvent(), Window, JavaScript hub.

💡 Best Practices