jQuery Contextmenu Event

What You’ll Learn

The contextmenu event fires when the user right-clicks an element — before the browser shows its default menu. This tutorial covers binding with .on("contextmenu"), blocking the native menu with event.preventDefault(), building custom menus, triggering with .trigger("contextmenu"), and how it differs from the click event.

Introduction

Right-clicking a web page normally opens the browser’s context menu — Copy, Inspect, Back, and other options. Many apps replace that menu with their own: “Rename,” “Delete,” or “Open in new tab.” jQuery’s contextmenu event is the hook for that behavior.

The event is sent to an element when the right mouse button is clicked on it, but before the context menu is displayed. If the user presses the context-menu keyboard key instead, the event fires on the html element or the currently focused element. Any HTML element can receive this event — not just images or links.

Understanding the contextmenu Event

Unlike click, which responds to a left-button press-and-release, contextmenu specifically handles the secondary (usually right) mouse button. jQuery passes a normalized event object with coordinates (event.pageX, event.pageY), the target element (event.target), and methods like event.preventDefault().

Your handler runs first. If you call event.preventDefault(), the browser skips its default menu — leaving room for a custom HTML menu positioned at the cursor. If you omit preventDefault(), both your handler and the native menu run (handler first, then the browser menu).

📝 Syntax

The jQuery API for the contextmenu event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("contextmenu" [, eventData ], handler) (since 1.0)

.on( "contextmenu" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data (since 1.4.3).
• handler — function called each time contextmenu fires: function( event ) { ... }.

2. Block the browser menu — event.preventDefault()

$( "#target" ).on( "contextmenu", function( event ) {
  event.preventDefault();
  // show your custom menu at event.pageX, event.pageY
} );

3. Trigger the event — .trigger("contextmenu") (since 1.0)

.trigger( "contextmenu" )

• Runs bound contextmenu handlers programmatically.
• Use .triggerHandler("contextmenu") to run handlers without bubbling side effects.

4. Unbind — .off("contextmenu" [, handler])

$( "#target" ).off( "contextmenu" );   // remove all contextmenu handlers

Official jQuery API example

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

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Returning false from a handler is equivalent to preventDefault() + stopPropagation().

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Examples 4–5 cover preventDefault() and programmatic triggers. Use the Try-it links to run each snippet — right-click inside the demo area to test.

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

User right-clicks #target → alert: "Handler for contextmenu called."

Browser menu may still appear unless preventDefault() is called

$( "p" ).on( "contextmenu", function() {
  alert( "Hello World!" );
} );

Right-click any paragraph → alert: "Hello World!"

Each p element has its own handler via the shared selector

var div = $( "div" ).first();

div.on( "contextmenu", function() {
  div.toggleClass( "contextmenu" );
} );

Right-click the blue block → toggles .contextmenu class (yellow background)

Right-click again → toggles back to blue

var $menu = $( "#custom-menu" );

$( "#panel" ).on( "contextmenu", function( event ) {
  event.preventDefault();
  $menu.css( { left: event.pageX, top: event.pageY } ).show();
} );

$( document ).on( "click", function() {
  $menu.hide();
} );

Right-click #panel → native menu blocked, custom menu at cursor

Left-click anywhere → custom menu hides

$( "#target" ).on( "contextmenu", function() {
  $( "#log" ).text( "contextmenu handler ran." );
} );

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

Right-click #target → log updates

Click #fire → $("#target").trigger("contextmenu") → same log message

🚀 Common Use Cases

• Custom context menus — file browsers, kanban boards, and image galleries with “Rename,” “Delete,” or “Download.”
• Canvas and diagram editors — right-click a shape to open editing options at the cursor.
• Table row actions — right-click a row for “Edit,” “Duplicate,” or “Archive” without cluttering every row with buttons.
• Disable default menu — event.preventDefault() on games or kiosk UIs where browser menus are unwanted.
• Inspect coordinates — log event.pageX / event.pageY for debugging layout or map tools.
• EventData labels — .on("contextmenu", { action: "copy" }, fn) to pass metadata without closures.

📝 Notes

• Bind with .on("contextmenu", handler) since jQuery 1.0 — not the deprecated .contextmenu(handler) shorthand.
• Trigger with .trigger("contextmenu") since jQuery 1.0.
• The event fires before the browser menu — call preventDefault() to replace it.
• Left-click (click) and right-click (contextmenu) are separate — bind both if needed.
• Context-menu keyboard key fires on html or the focused element — test keyboard accessibility.
• On macOS, Ctrl+click also triggers contextmenu — same as right-click on a two-button mouse.
• Custom menus should close on Escape and outside click; consider role="menu" for screen readers.

💡 Best Practices