JavaScript MouseEvent getModifierState() Method

What You’ll Learn

MouseEvent.getModifierState() is an instance method that returns whether a named modifier key is active for that mouse event. Learn the key strings, how it compares to shiftKey / ctrlKey / altKey / metaKey, lock keys, and five try-it labs.

Introduction

Mouse events already expose four handy booleans: shiftKey, ctrlKey, altKey, and metaKey. getModifierState() is a more general query: pass a modifier name and get true or false—including lock keys such as Caps Lock.

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

Understanding the Method

MDN: MouseEvent.getModifierState() returns the current state of the specified modifier key—true if the modifier is active (pressed or locked), otherwise false.

• Instance — call event.getModifierState(key) in a handler.
• Boolean — active vs not active for that named modifier.
• String argument — case-sensitive modifier key value (or "Accel").
• Same idea as keyboard — details live on KeyboardEvent’s method.

📝 Syntax

const active = mouseEvent.getModifierState(key);

Parameters

Return value

A boolean: true if that modifier is active for the event; otherwise false.

⌨️ Common Modifier Key Strings

MDN notes that for the four everyday modifiers, the dedicated properties (altKey, ctrlKey, metaKey, shiftKey) are often preferable. Use getModifierState when you need one API for many names—or lock-state keys.

⚠️ The "Accel" Virtual Modifier

getModifierState("Accel") is a virtual check: historically it meant “the platform shortcut modifier” (often Control on Windows/Linux, Command on Mac). Modern drafts treat "Accel" as effectively deprecated. Today it commonly returns true when ctrlKey or metaKey is true.

Examples Gallery

Examples follow MDN MouseEvent.getModifierState() and the related KeyboardEvent details. Hold modifiers while clicking in the try-it labs.

document.addEventListener("click", (e) => {
  console.log(e.getModifierState("Shift"));
});

false

document.addEventListener("click", (e) => {
  console.log({
    shift: e.getModifierState("Shift") === e.shiftKey,
    control: e.getModifierState("Control") === e.ctrlKey,
    alt: e.getModifierState("Alt") === e.altKey,
    meta: e.getModifierState("Meta") === e.metaKey
  });
});

{
  shift: true,
  control: true,
  alt: true,
  meta: true
}

document.addEventListener("click", (e) => {
  console.log({
    CapsLock: e.getModifierState("CapsLock"),
    NumLock: e.getModifierState("NumLock")
  });
});

{
  CapsLock: false,
  NumLock: true
}

const KEYS = ["Shift", "Control", "Alt", "Meta"];

document.addEventListener("click", (e) => {
  const active = KEYS.filter((key) => e.getModifierState(key));
  console.log(active.length ? active.join("+") : "(none)");
});

Shift+Control

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

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

true
true
false
true

🚀 Common Use Cases

• Querying Caps Lock / Num Lock during mouse interactions.
• One helper that can ask about many modifier names.
• Unit tests that assert modifier state on synthetic events.
• Debugging “which modifiers were held?” logs.
• Teaching the link between properties and KeyboardEvent-style key names.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since March 2019).
• Not Deprecated, Experimental, or Non-standard — no status banner required for the method.
• The "Accel" virtual modifier is effectively deprecated—avoid in new code.
• Key strings are case-sensitive ("Shift", not "shift").
• Related: y, shiftKey, ctrlKey, altKey, metaKey, MouseEvent(), JavaScript hub.

💡 Best Practices