jQuery Contextmenu Event

What Is the contextmenu Event?

contextmenu is sent when the user right-clicks an element — before the browser context menu appears — or when the context-menu key is pressed. Bind with .on("contextmenu", handler).

$("#target").on("contextmenu", function (event) { ... })
$("#target").trigger("contextmenu")

// Fires before the native menu
// Use event.preventDefault() to block that menu
// Prefer on/trigger — not deprecated .contextmenu()

How to Use contextmenu

Select an element, bind with .on, optionally block the native menu.

1. Select the element(s): $("#panel"), $("p"), etc.
2. Bind: .on("contextmenu", function (event) { ... }).
3. Optional: event.preventDefault() to hide the browser menu.
4. To fire in code: .trigger("contextmenu"). Unbind with .off("contextmenu").

Pseudocode

function onContextmenu(element, handler):
    when right-click on element
     (or context-menu key while focused):
        before browser menu shows:
            handler(event)

trigger(element, "contextmenu"):
    run all contextmenu handlers on element

Cheat Sheet

Keep these facts handy while wiring right-click handlers.

Live Preview

Run presets that simulate on("contextmenu") (via .trigger so demos work without a real right-click).

Handler for contextmenu called.

jQuery Examples

Short, copy-ready snippets. Right-click in Try It Yourself, or use View Output for the expected text.

$("#target").on("contextmenu", function () {
  console.log("Handler for contextmenu called.");
});

Handler for contextmenu called.

$("#target").on("contextmenu", function (event) {
  event.preventDefault();
  console.log("Custom action — native menu blocked.");
});

Custom action — native menu blocked.

$("#target").on("contextmenu", function () {
  console.log("Handler for contextmenu called.");
});

$("#fire").on("click", function () {
  $("#target").trigger("contextmenu");
});

Handler for contextmenu called.

$("#target").on("contextmenu", function (event) {
  event.preventDefault();
  console.log("x:", event.pageX, "y:", event.pageY);
});

x: 120 y: 80

Performance Notes

Right-clicks are rare compared to mousemove — focus on clear UX and .off when removing long-lived widgets.

Key Takeaways