HTML oncontextmenu Attribute

Introduction

The oncontextmenu attribute is an inline event handler that runs JavaScript when the contextmenu event fires. That usually happens when the user right-clicks an element (or long-presses on touch devices) — the gesture that opens a browser context menu. Developers use it to run custom logic, show a custom menu, or call event.preventDefault() to block the default menu. The contextmenu event bubbles, so you can listen on a parent. For production sites, prefer addEventListener("contextmenu", …) and always consider accessibility when replacing the browser menu.

What You’ll Learn

Purpose of oncontextmenu Attribute

The primary purpose of oncontextmenu is to react when the user opens a context menu on an element — typically by right-clicking. Common uses include showing a custom menu with actions like “Copy link” or “Delete item”, disabling the default menu on images, or running validation before allowing browser actions. Pair it with event.preventDefault() when you replace the built-in menu with your own UI.

Do not confuse oncontextmenu with onclick. A right-click may also fire other events, but contextmenu is specifically tied to the menu gesture. Blocking the default menu without offering alternatives hurts usability — only customize when it clearly helps the user.

📝 Syntax

Set oncontextmenu on any element or assign element.oncontextmenu:

<script>

  function handleContextMenu(event) {

    event.preventDefault();

    document.getElementById("status").textContent = "Custom menu action!";

  }

</script>



<div id="box" oncontextmenu="handleContextMenu(event)">

  Right-click me

</div>

<p id="status"></p>

Syntax Rules

• Value is JavaScript code executed when the context menu gesture occurs.
• Pass event to the handler so you can call event.preventDefault().
• Works on almost any element: div, img, button, p, etc.
• JavaScript: element.oncontextmenu = function(e) { … }.
• Modern alternative: element.addEventListener("contextmenu", handler).
• The contextmenu event bubbles — you can delegate on a parent container.

💎 Values

The oncontextmenu attribute accepts a string of JavaScript code:

• oncontextmenu="handleMenu(event)" — Call a function with the event object.
• oncontextmenu="event.preventDefault()" — Block the browser menu (use carefully).
• JavaScript: box.oncontextmenu = (e) => { … } assigns the handler.

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

box.addEventListener("contextmenu", (event) => {

  event.preventDefault();

  showCustomMenu(event.clientX, event.clientY);

});

// Dynamic assignment

document.getElementById("photo").oncontextmenu = function (e) {

  e.preventDefault();

  console.log("Image context menu blocked");

};

Applicable Elements

oncontextmenu vs onclick vs onmousedown

Examples Gallery

Inline oncontextmenu with preventDefault, addEventListener on an image, and a simple custom context menu.

<button type="button" oncontextmenu="handleMenu(event)">

  Right-click me

</button>



<script>

  function handleMenu(event) {

    event.preventDefault();

    document.getElementById("msg").textContent = "Custom context action!";

  }

</script>

<script>

  document.getElementById("photo").addEventListener("contextmenu", function (event) {

    event.preventDefault();

    showCustomMenu(event.clientX, event.clientY);

  });



  // Or property form:

  document.getElementById("photo").oncontextmenu = function (e) { e.preventDefault(); };

</script>

area.addEventListener("contextmenu", (e) => {

  e.preventDefault();

  menu.style.left = e.clientX + "px";

  menu.style.top = e.clientY + "px";

  menu.hidden = false;

});



document.addEventListener("click", () => { menu.hidden = true; });

♿ Accessibility

• Do not block without alternatives — If you call preventDefault(), provide a custom menu with the same essential actions (copy, open link, etc.).
• Keyboard access — Custom menus need keyboard navigation (arrow keys, Escape to close) and focus management.
• Screen readers — Use role="menu", role="menuitem", and visible focus on custom menu items.
• Avoid alert() on contextmenu — Show a positioned menu or status text instead of modal alerts.
• Touch users — Long-press triggers contextmenu on mobile; test custom menus on touch devices.

💡 Best Practices