JavaScript Element contextmenu Event

What You’ll Learn

The contextmenu event fires when the user tries to open a context menu—usually with a right-click or the context menu key. Learn preventDefault for custom menus, clientX / clientY, addEventListener vs oncontextmenu, Firefox Shift quirks, and five try-it labs.

Introduction

Browsers show a built-in context menu when you right-click (copy, inspect, open link, and so on). The contextmenu event is your chance to react—log the action, block the default menu, or show a custom menu for your app.

Any right-click that was not disabled earlier (for example by canceling the related click path) typically leads to a contextmenu event on the target.

Understanding contextmenu

An instance event that answers: “Is the user trying to open a context menu on this element?”

• Triggers — right mouse button, context menu key (and similar).
• PointerEvent (inherits MouseEvent) in modern specs.
• Cancelable — preventDefault() can stop the browser menu.
• Useful fields — clientX, clientY, target.
• Limited availability on MDN (not Baseline)—test mobile carefully.

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("contextmenu", (event) => { });

oncontextmenu = (event) => { };

Event type

A PointerEvent (inherits from MouseEvent and Event).

Handy inherited properties

⚠️ Firefox Shift + Right-Click

MDN notes a Firefox exception: if the user holds Shift while right-clicking, Firefox may show the context menu without firing contextmenu. In that case preventDefault() cannot hide the menu because your handler never runs.

Treat custom menus as progressive enhancement, not a security lock. Users can still use other browser chrome or OS features.

⚖️ contextmenu vs click / auxclick

Examples Gallery

Examples follow MDN Element: contextmenu event. Right-click the demo targets (or use the context menu key where available).

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

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

Right-click first paragraph → no browser menu
Right-click second paragraph → normal menu

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

box.oncontextmenu = (event) => {
  event.preventDefault();
  console.log("context menu blocked");
};

context menu blocked

const area = document.getElementById("area");
const out = document.getElementById("out");

area.addEventListener("contextmenu", (event) => {
  event.preventDefault();
  out.textContent = "x=" + event.clientX + ", y=" + event.clientY;
});

x=142, y=96

const surface = document.getElementById("surface");
const menu = document.getElementById("menu");

surface.addEventListener("contextmenu", (event) => {
  event.preventDefault();
  menu.style.display = "block";
  menu.style.left = event.clientX + "px";
  menu.style.top = event.clientY + "px";
});

document.addEventListener("click", () => {
  menu.style.display = "none";
});

Custom menu appears at the pointer; click elsewhere to hide

<p id="noContextMenu">The context menu has been disabled on this paragraph.</p>
<p>But it has not been disabled on this one.</p>

<script>
const noContext = document.getElementById("noContextMenu");
noContext.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});
</script>

First paragraph: menu blocked
Second paragraph: browser menu opens

🚀 Common Use Cases

• Building custom right-click menus for editors, tables, or maps.
• Disabling the browser menu on a canvas or game surface.
• Logging where users open menus for UX research.
• Showing contextual actions for a selected row or file.
• Pairing with a visible “More” button for touch / iOS users.

🔧 How It Works

📝 Notes

• MDN: Limited availability (not Baseline)—desktop is usually fine; iOS Safari often is not.
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Firefox Shift+right-click may bypass the event entirely.
• Do not treat preventDefault() as a way to protect content from copying.
• Related learning: click, copy, addEventListener(), JavaScript hub.

💡 Best Practices