JavaScript MouseEvent ctrlKey Property

Beginner
5 min read
Updated: Nov 2026
5 examples
Property
Decorative image with the word CTRLKEY

Definition

MouseEvent.ctrlKey is a read-only boolean: true if the Control key was pressed when the mouse event happened, otherwise false (MDN).

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.ctrlKey. Start with this line.

JavaScript
event.ctrlKey
CallWhat it does
event.ctrlKeyPrimary signature.

Built into the browser. Read event.ctrlKey on a MouseEvent — no import required.

Library declarations
JavaScript
event.ctrlKey

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*true if Control was held, else false

JavaScript Examples

Example 1 — Log on mousemove (MDN)

Show whether Control is held while the cursor moves.

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

window.addEventListener("mousemove", function (e) {
  log.textContent =
    "The ctrl key was pressed while the cursor was moving: " + e.ctrlKey;
});
Try It Yourself

How It Works

  1. Listen for mousemove. Fires as the pointer moves.
  2. Read e.ctrlKey. Boolean for Control at that moment (MDN).
  3. Update the log. Easy live feedback.
  4. Works well on Mac too. Unlike Control+click, move events still see Control.

Example 2 — Ctrl / ⌘ + Click

Treat Control (Windows/Linux) or Command (Mac) as a power-click.

JavaScript
button.addEventListener("click", function (e) {
  if (e.ctrlKey || e.metaKey) {
    console.log("modifier+click — open related view");
  } else {
    console.log("Normal click — default action");
  }
});
Try It Yourself

How It Works

  1. Check both modifiers. Windows/Linux → Control; Mac → Command.
  2. Avoid relying on Control+click alone on Mac. OS may steal it (MDN).
  3. Branch the action. Power-click vs normal click.
  4. Common pattern. Open in new tab / alternate view.

Example 3 — Synthetic MouseEvent

Set ctrlKey when creating an event in code.

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

console.log(event.ctrlKey);                 // true
console.log(event.type);                    // "click"
console.log(event instanceof MouseEvent);   // true
Try It Yourself

How It Works

  1. Pass ctrlKey: true. Constructor option sets the flag.
  2. Read-only afterward. Matches what you configured.
  3. Useful for tests. No need to hold a real key.
  4. Default is false. Omit it when Control is not needed.

Example 4 — All Modifier Flags

Log ctrlKey next to Alt, Shift, and Meta on each click.

JavaScript
document.addEventListener("click", function (e) {
  console.log({
    ctrlKey: e.ctrlKey,
    altKey: e.altKey,
    shiftKey: e.shiftKey,
    metaKey: e.metaKey
  });
});
Try It Yourself

How It Works

  1. Four sibling properties. Same event, different keys.
  2. Hold combinations. e.g. Ctrl+Shift → both true.
  3. Mac Command is metaKey. Not ctrlKey.
  4. Great for debugging. See exactly which modifiers fired.

Example 5 — getModifierState("Control")

Compare the boolean property with the modifier-state API.

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

console.log(event.ctrlKey);                        // true
console.log(event.getModifierState("Control"));    // true
console.log(event.ctrlKey === event.getModifierState("Control")); // true
Try It Yourself

How It Works

  1. ctrlKey is the shortcut. Direct boolean on the event.
  2. getModifierState("Control"). Same idea via a string name.
  3. They match here. Useful when you already use getModifierState for other keys.
  4. Prefer ctrlKey for clarity when you only care about Control.
Compatibility

Browser Support

MouseEvent.ctrlKey is Baseline Widely available (MDN, since July 2015). Safe for modifier+mouse UIs — watch Mac click and pinch-zoom caveats.

✓ Baseline · Widely available

MouseEvent.ctrlKey

Supported across Chrome, Firefox, Safari, Edge, Opera, and legacy IE. Read-only boolean for the Control key.

99% Browser support
Google Chrome ctrlKey · full support
Full support
Microsoft Edge ctrlKey · Chromium
Full support
Apple Safari ctrlKey · full support
Full support
Mozilla Firefox ctrlKey · full support
Full support
Opera ctrlKey · full support
Full support
Internet Explorer ctrlKey · legacy
Legacy support
MouseEvent.ctrlKey Excellent

Bottom line: Use freely. On Mac prefer metaKey for click shortcuts; treat pinch-zoom wheel ctrlKey carefully.

Frequently Asked Questions

A read-only boolean that is true when the Control key was held during that mouse event, and false otherwise (MDN).
No. MDN marks MouseEvent.ctrlKey as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
On Macintosh, Control+click is often intercepted by the OS to open a context menu, so ctrlKey may not be detectable on click events (MDN). Prefer metaKey (Command) for Mac-style shortcuts, or use mousemove where Control is visible.
MDN notes that pinch-zooming on a trackpad can send a simulated wheel event with ctrlKey set to true. Do not assume every such event means the physical Control key was held.
Pass ctrlKey: true in the options object: new MouseEvent("click", { ctrlKey: true }). The constructed event then reports event.ctrlKey as true.
Mouse events also expose altKey, shiftKey, and metaKey. Together they describe which modifiers were held. You can also use event.getModifierState("Control").

Next: layerX

Learn how event.layerX reports the X coordinate relative to the current layer.

layerX 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)

10 people found this page helpful

JavaScript MouseEvent clientY Property JavaScript MouseEvent layerX Property