JavaScript MouseEvent getModifierState() Method

Beginner
5 min read
Updated: Nov 2026
5 examples
Method
Decorative image with the word GETMODIFIERSTATE

Definition

MouseEvent.getModifierState(key) returns true if the named modifier is active (pressed or locked) for that event, otherwise false (MDN). Details of key names match KeyboardEvent.getModifierState().

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call event.getModifierState. Start with this line.

JavaScript
event.getModifierState(key)
CallWhat it does
event.getModifierState(key)Primary signature.
event.getModifierState(...)Call with the arguments your case needs.

Built into the browser. Call getModifierState(...) on a MouseEvent — no import required.

Library declarations
JavaScript
event.getModifierState(key)

Parameters

ParameterDescription
keyRequired. Case-sensitive modifier name

Return Value

Return ValueDescription
*boolean

JavaScript Examples

Example 1 — Check Shift on Click

Read getModifierState("Shift") in a click handler.

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

How It Works

  1. Listen for click. Each click delivers a MouseEvent.
  2. Pass "Shift". Exact KeyboardEvent.key spelling.
  3. Read the boolean. Active → true.
  4. Hold Shift and click again to see true.

Example 2 — Match shiftKey

For Shift, getModifierState matches event.shiftKey.

JavaScript
el.addEventListener("click", (e) => {
  console.log(e.getModifierState("Shift"), e.shiftKey);
});
Try It Yourself

How It Works

  1. Call getModifierState("Shift"). Named API.
  2. Read event.shiftKey. Dedicated property.
  3. Values match for normal Shift presses.
  4. Prefer shiftKey when you only need Shift.

Example 3 — Several Modifiers

Query Control, Alt, and Meta in one handler.

JavaScript
el.addEventListener("click", (e) => {
  console.log({
    Control: e.getModifierState("Control"),
    Alt: e.getModifierState("Alt"),
    Meta: e.getModifierState("Meta")
  });
});
Try It Yourself

How It Works

  1. One event, many names. Ask only what you need.
  2. Control / Alt / Meta are case-sensitive strings.
  3. Hold a key and click to flip that flag to true.
  4. Or use ctrlKey / altKey / metaKey for clarity.

Example 4 — CapsLock

Lock keys have no *Key property — use getModifierState.

JavaScript
el.addEventListener("click", (e) => {
  console.log(e.getModifierState("CapsLock"));
});
Try It Yourself

How It Works

  1. CapsLock is a lock state. Not the same as holding a key.
  2. getModifierState("CapsLock") reports that LED/state.
  3. No capsLock boolean on MouseEvent like shiftKey.
  4. Toggle Caps Lock and click again to compare.

Example 5 — Synthetic MouseEvent

Built events honor modifier options from the constructor.

JavaScript
const e = new MouseEvent("click", { shiftKey: true });
console.log(e.getModifierState("Shift")); // true
console.log(e.shiftKey);                 // true
Try It Yourself

How It Works

  1. new MouseEvent with shiftKey: true.
  2. No real keyboard needed for the synthetic event.
  3. getModifierState("Shift") reads that option.
  4. Useful in tests and scripted UI actions.
Compatibility

Browser Support

MouseEvent.getModifierState() is marked Baseline Widely available on MDN (since March 2019).

✓ Baseline · Widely available

MouseEvent.getModifierState()

Returns whether a named modifier is active on a mouse event. Key names match KeyboardEvent.getModifierState(). Avoid deprecated Accel.

100% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
getModifierState Excellent

Bottom line: Safe everyday API. Use exact key casing; prefer *Key properties for Shift/Ctrl/Alt/Meta. See the MDN getModifierState reference.

Frequently Asked Questions

It returns a boolean for one named modifier on that mouse event: true if the modifier is active (pressed or locked), otherwise false. MDN points to KeyboardEvent.getModifierState() for the full key list.
No. MDN marks MouseEvent.getModifierState() as Baseline Widely available (since March 2019). It is not Deprecated, Experimental, or Non-standard. The virtual "Accel" string is effectively deprecated in modern specs.
Case-sensitive KeyboardEvent.key values for modifiers, such as "Shift", "Control", "Alt", "Meta", "CapsLock", and "NumLock". Wrong casing (for example "shift") typically returns false.
For the four common modifiers, event.shiftKey / ctrlKey / altKey / metaKey are clearer. Prefer getModifierState for lock keys (CapsLock, NumLock) or one API that can query many modifier names.
Yes. Pass "Shift", not "shift". Wrong casing typically returns false.
Yes for the usual modifiers when you set options like { shiftKey: true }. Then event.getModifierState("Shift") is typically true, matching event.shiftKey.

Next: initMouseEvent()

See the legacy way to initialize mouse events (and why the constructor is better).

initMouseEvent tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

JavaScript MouseEvent Constructor JavaScript MouseEvent initMouseEvent() Method