JavaScript MouseEvent metaKey Property

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

Definition

MouseEvent.metaKey is a read-only boolean. It is true when the Meta key was held for that mouse event, and false otherwise. On Mac that is usually Command (⌘); on Windows it is the Windows key (⊞).

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

Syntax

Use event.metaKey. Start with this line.

JavaScript
event.metaKey
CallWhat it does
event.metaKeyPrimary signature.

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

Library declarations
JavaScript
event.metaKey

Parameters

ParameterDescription
Mouse / pointer eventRequired. Source of metaKey

Return Value

Return ValueDescription
*The current value of event.metaKey.

JavaScript Examples

Example 1 — Log metaKey on Click

MDN-style demo: print whether Meta was held when you clicked.

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

document.addEventListener("click", (e) => {
  log.textContent = `The meta key is pressed: ${e.metaKey}`;
});
Try It Yourself

How It Works

  1. Find the log node. querySelector("#log") picks the paragraph that will show the result.
  2. Listen for clicks. Every document click runs the handler with a MouseEvent.
  3. Read the flag. e.metaKey is true or false for that click.
  4. Update the UI. The template string writes the boolean into the log text.

Example 2 — Branch on Meta / Ctrl+Click

Use a secondary action for Command (Mac) or Control (Windows/Linux).

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

How It Works

  1. Attach a click handler to the control (here, link).
  2. Check both modifiers. metaKey covers Command on Mac; ctrlKey covers Control on Windows/Linux.
  3. Secondary path. If either is true, run the “power click” action and return early.
  4. Default path. Otherwise treat it as a normal click.

Example 3 — Synthetic Event with metaKey: true

Great for unit tests without holding a physical key.

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

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

How It Works

  1. Construct the event. new MouseEvent("click", { … }) builds a synthetic click.
  2. Set the option. metaKey: true makes the event report Meta as held.
  3. Inspect the result. event.metaKey is true; type is "click".
  4. Use in tests. Dispatch the event if you need listeners to run.
Compatibility

Browser Support

MouseEvent.metaKey is Baseline Widely available (MDN: since July 2015). It is a core mouse-event modifier boolean — not Deprecated, Experimental, or Non-standard.

✓ Baseline · Widely available

MouseEvent.metaKey

Reliable Meta modifier boolean — Command on Mac, Windows key on Windows (OS may intercept).

Universal 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
metaKey Excellent

Bottom line: Safe to use in all modern browsers. Pair with ctrlKey for cross-platform power-clicks, and keep a non-Meta UI fallback.

Frequently Asked Questions

It is a read-only boolean on a mouse event. true means the Meta key was held when that event fired; false means it was not. On Mac, Meta is usually Command (⌘); on Windows it is the Windows key (⊞).
No. MDN marks MouseEvent.metaKey as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
Many operating systems bind special actions to Meta (for example opening the Start menu on Windows). The OS may handle the key before your page sees it, so the property can remain false even though the key is pressed.
Pass metaKey: true in the options object: new MouseEvent("click", { metaKey: true }). The constructed event then reports event.metaKey as true.
They are different modifiers. Mac power-clicks often use Command (metaKey); Windows/Linux often use Control (ctrlKey). Checking ctrlKey || metaKey covers both platforms for many secondary-click patterns.
For everyday mouse handlers, event.metaKey is shorter and clearer. getModifierState("Meta") is useful when you already use that API for other keys; on a normal MouseEvent they usually agree.

Next: MouseEvent.movementX

Learn horizontal pointer deltas between consecutive move events.

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

11 people found this page helpful

JavaScript MouseEvent layerY Property JavaScript MouseEvent movementX Property