JavaScript Element contextmenu Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word CONTEXTMENU

Definition

In JavaScript, the contextmenu event fires when the user attempts to open a context menu — typically by right-clicking or pressing the context menu key (MDN).

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for contextmenu. Start with this line.

JavaScript
addEventListener("contextmenu", fn)
CallWhat it does
addEventListener("contextmenu", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("contextmenu", …) — no import required.

Library declarations
JavaScript
addEventListener("contextmenu", fn)

Parameters

ParameterDescription
Event nameRequired. "contextmenu"
Handler propOptional. oncontextmenu

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Cancel the Browser Menu (MDN)

Call preventDefault() so right-click does nothing on that element.

JavaScript
const noContext = document.getElementById("noContextMenu");

noContext.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});
Try It Yourself

How It Works

  1. Find the target. Select the element that should not show the default menu.
  2. Listen for contextmenu. Fires on right-click / menu key.
  3. Call preventDefault(). Cancels the browser’s context menu.
  4. Other elements stay normal. Only this listener’s target is affected.

Example 2 — Log Click Coordinates

Read clientX / clientY to place a custom menu later.

JavaScript
document.addEventListener("contextmenu", (event) => {
  console.log(event.clientX, event.clientY);
});
Try It Yourself

How It Works

  1. Listen on a container (here, document) or a specific element.
  2. Read viewport coords. clientX / clientY come from MouseEvent/PointerEvent.
  3. Use them for UI. Position a custom menu near the pointer.
  4. Still cancel if needed. Add preventDefault() when replacing the browser menu.

Example 3 — Simple Custom Menu Signal

Cancel the default menu and show a plain-text “menu open” message.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");

box.addEventListener("contextmenu", (event) => {
  event.preventDefault();
  out.textContent =
    "Custom menu at " + event.clientX + ", " + event.clientY;
});
Try It Yourself

How It Works

  1. Cancel first. preventDefault() hides the browser menu.
  2. Build your UI. Here we only write text — keep styling in CSS files in real apps.
  3. Include coordinates. So you know where the user clicked.
  4. Add a button fallback for platforms where contextmenu is unreliable.
Compatibility

Browser Support

Element contextmenu has Limited availability on MDN (not Baseline). Desktop browsers generally support it; some mobile browsers (notably iOS Safari) are incomplete. Always provide a non–right-click menu path.

✓ Limited availability

contextmenu

Fires when the user tries to open a context menu (right-click or menu key).

Limited Not Baseline
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
contextmenu Limited

Bottom line: Fine for desktop custom menus with preventDefault. Add a visible menu control for touch / Limited-availability platforms. Remember Firefox Shift+right-click.

Frequently Asked Questions

It fires when the user attempts to open a context menu — typically by right-clicking or pressing the context menu key (MDN).
No. MDN does not mark it Deprecated, Experimental, or Non-standard. It has Limited availability (not Baseline), mainly because support is incomplete on some platforms such as iOS Safari.
A PointerEvent (inherits from MouseEvent). Older specs used MouseEvent; check compatibility if you rely on PointerEvent-only fields.
Call event.preventDefault() in your contextmenu handler, then show your own UI — often positioned with event.clientX and event.clientY.
In Firefox, holding Shift while right-clicking shows the context menu without firing the contextmenu event, so canceling the event cannot block that path (MDN).
Desktop browsers generally fire contextmenu on right-click. On many touch devices (notably iOS Safari) the event may not fire; provide an alternate control such as a menu button for mobile users.

Next: copy

Learn the Element event fired when the user copies content.

copy 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 Element contentvisibilityautostatechange Event JavaScript Element copy Event