JavaScript MouseEvent altKey Property

What You’ll Learn

MouseEvent.altKey is a read-only boolean on each mouse event: true if Alt (Option on Mac) was held when the event fired. Learn how to read it, build Alt+click shortcuts, set it on synthetic events, and compare it with other modifiers.

Introduction

When a user clicks while holding a modifier key, your handler often needs a different action—for example Alt+click to open a detail panel. The browser stores that state on the event object as altKey.

On Mac keyboards this is the Option key. Same property name: event.altKey.

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

Understanding the Property

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

• Instance — read event.altKey inside a handler.
• Boolean — true pressed, false not pressed.
• Read-only — you do not assign to it on a live user event.
• Platform note — some Linux setups use Alt+click for window move/resize, so detection can fail.

📝 Syntax

const isAltHeld = mouseEvent.altKey;

Value

A boolean: true if Alt/Option was held during the event; otherwise false.

Setting it on synthetic events

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

⚖️ Related Modifier Properties

You can also call event.getModifierState("Alt") for a related check when you want the KeyboardEvent-style modifier API.

Examples Gallery

Examples follow MDN MouseEvent.altKey. Hold Alt (Option on Mac) while clicking to see true.

document.addEventListener("click", (e) => {
  console.log(`The alt key is pressed: ${e.altKey}`);
});

The alt key is pressed: false

button.addEventListener("click", (e) => {
  if (e.altKey) {
    console.log("Alt+click — show advanced options");
  } else {
    console.log("Normal click — default action");
  }
});

Normal click — default action

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

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

true
click
true

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

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

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

console.log(event.altKey);                 // true
console.log(event.getModifierState("Alt")); // true
console.log(event.altKey === event.getModifierState("Alt")); // true

true
true
true

🚀 Common Use Cases

• Alt+click (Option+click) secondary actions in editors and dashboards.
• Logging modifier state while debugging mouse handlers.
• Unit tests that construct MouseEvent with altKey: true.
• Combining with ctrlKey / shiftKey for multi-modifier shortcuts.
• Teaching beginners the difference between instance modifiers and static Force Touch constants.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• On Mac, Alt is the Option key; the property name remains altKey.
• Some Linux window managers steal Alt+click; detection may fail there.
• Related: MouseEvent(), addEventListener(), WEBKIT_FORCE_AT_MOUSE_DOWN, button, Window, JavaScript hub.

💡 Best Practices