JavaScript MouseEvent ctrlKey Property

What You’ll Learn

MouseEvent.ctrlKey is a read-only boolean: true if Control was held when the mouse event fired. Learn Ctrl+click patterns, Mac caveats, trackpad pinch-zoom quirks, synthetic events, and five try-it labs.

Introduction

Ctrl+click is a common power-user pattern: open in a new tab, multi-select, or a secondary action. The browser stores that state on the event as ctrlKey.

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

Understanding the Property

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

• Instance — read event.ctrlKey inside a handler.
• Boolean — true pressed, false not pressed.
• Read-only — set via constructor options on synthetic events.
• Platform notes — Mac Control+click / trackpad pinch-zoom quirks (see above).

📝 Syntax

const isCtrlHeld = mouseEvent.ctrlKey;

Value

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

Setting it on synthetic events

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

⚖️ Related Modifier Properties

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

Examples Gallery

Examples follow MDN MouseEvent.ctrlKey. Hold Ctrl while moving or clicking to see true (platform caveats apply).

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

window.addEventListener("mousemove", (e) => {
  log.textContent =
    `The ctrl key was pressed while the cursor was moving: ${e.ctrlKey}`;
});

The ctrl key was pressed while the cursor was moving: false

link.addEventListener("click", (e) => {
  if (e.ctrlKey || e.metaKey) {
    // ctrl (Win/Linux) or Command (Mac) — often “open related”
    console.log("Modifier+click — open related view");
    return;
  }
  console.log("Normal click — default action");
});

Normal click — default action

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

true
click
true

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

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

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

true
true
true

🚀 Common Use Cases

• Ctrl+click (or Command+click) secondary actions and multi-select.
• Logging Control state on mousemove when Mac click is OS-intercepted.
• Unit tests that construct MouseEvent with ctrlKey: true.
• Distinguishing physical Control from trackpad pinch-zoom wheel events.
• Teaching the modifier family next to altKey.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• On Mac, Control+click may open a context menu before your page sees the click.
• Trackpad pinch-zoom can set ctrlKey on simulated wheel events.
• Related: altKey, clientY, layerX, MouseEvent(), Window, JavaScript hub.

💡 Best Practices