jQuery .contextmenu() Method

What You’ll Learn

The .contextmenu() method is jQuery’s legacy shorthand for binding and triggering the contextmenu event. This tutorial covers .contextmenu(handler) since 1.0, .contextmenu(eventData, handler) since 1.4.3, no-argument .contextmenu() as a trigger, migration to .on("contextmenu") and .trigger("contextmenu"), and why the binding form is deprecated since jQuery 3.3. For the modern right-click API, see the jQuery contextmenu event tutorial.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .click(), .contextmenu(), .keydown(), and dozens more. The .contextmenu() method let you bind a right-click handler in one short call: $("#panel").contextmenu(function(e){ ... }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

Understanding .contextmenu() matters when reading older tutorials and legacy codebases that handle right-clicks. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles explicitly — .on("contextmenu", handler) for binding and .trigger("contextmenu") for firing. This page documents the shorthand API and shows how to migrate.

Understanding the .contextmenu() Method

The official jQuery API describes .contextmenu() as a way to bind an event handler to the contextmenu event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched element and calls it when the user right-clicks (or presses the context-menu key) — before the browser’s default menu appears — the same contextmenu event that .on("contextmenu") handles today.

When you call .contextmenu() with no arguments, jQuery synthetically fires the contextmenu event on each matched element. Bound handlers run. This trigger behavior is equivalent to .trigger("contextmenu").

📝 Syntax

The .contextmenu() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("contextmenu") is preferred:

1. Bind a handler — .contextmenu( handler ) (since 1.0, deprecated 3.3)

.contextmenu( handler )

• handler — function executed each time contextmenu fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "contextmenu", handler ).

2. Bind with eventData — .contextmenu( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.contextmenu( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "contextmenu", eventData, handler ).

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

.contextmenu()

• No arguments — triggers contextmenu on every matched element.
• Runs bound handlers programmatically.
• Preferred replacement: .trigger( "contextmenu" ).

Official jQuery API migration note

// Deprecated binding
$( "#target" ).contextmenu( function() {
  alert( "Handler for `contextmenu` called." );
} );

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

// Deprecated trigger
$( "#target" ).contextmenu();

// Modern trigger
$( "#target" ).trigger( "contextmenu" );

Return value

• All .contextmenu() signatures return the original jQuery object for chaining.
• Returning false from a handler is equivalent to preventDefault() + stopPropagation() — useful for blocking the native menu in legacy code.

Examples Gallery

Five examples cover binding, eventData, triggering, migration from .contextmenu() to .on("contextmenu"), and method chaining. Use the Try-it links and right-click inside the demo area. Remember: binding with .contextmenu(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( "#target" ).contextmenu( function() {
  $( "#out" ).text( "Handler ran via .contextmenu(function(){ ... })." );
} );

User right-clicks #target → handler runs

#out text updates to confirm .contextmenu(fn) fired

Browser menu may still appear unless preventDefault() is called

Deprecated — prefer .on("contextmenu", fn) for new code

$( ".item" ).contextmenu( { menu: "actions" }, function( event ) {
  var label = $( this ).data( "label" );
  $( "#out" ).text(
    "Right-clicked: " + label + " | eventData.menu: " + event.data.menu
  );
} );

Right-click File A → "Right-clicked: File A | eventData.menu: actions"

Right-click File B → same eventData.menu on every .item element

Modern equivalent: .on("contextmenu", { menu: "actions" }, fn)

var count = 0;

$( "#target" ).contextmenu( function() {
  count++;
  $( "#out" ).text( "Target handler fired (count: " + count + ")" );
} );

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

Right-click #target directly → count increments

Click #fire → $("#target").contextmenu() → same handler runs

No-arg .contextmenu() is trigger shorthand — prefer .trigger("contextmenu")

$( "#legacy" ).contextmenu( function() {
  $( "#out" ).text( "Legacy: .contextmenu(function(){ ... }) — deprecated since jQuery 3.3." );
} );

$( "#modern" ).on( "contextmenu", function() {
  $( "#out" ).text( "Modern: .on('contextmenu', function(){ ... }) — use this for new code." );
} );

Right-click #legacy → legacy deprecation message

Right-click #modern → modern .on("contextmenu") message

Behavior is identical — only the API name differs

$( "#panel" )
  .contextmenu( function( event ) {
    event.preventDefault();
    $( "#out" ).text( "Right-clicked — native menu blocked via preventDefault()." );
  } )
  .addClass( "has-menu" );

Right-click #panel → #out updates, browser menu suppressed

.addClass("has-menu") runs once at setup — not on each right-click

Same chaining works with .on("contextmenu", fn).addClass("has-menu")

🚀 Common Use Cases

• Reading legacy code — recognize $("#panel").contextmenu(fn) as equivalent to .on("contextmenu", fn) when maintaining older projects.
• Custom context menus — legacy apps often used .contextmenu(function(e){ e.preventDefault(); ... }) — migrate to .on("contextmenu") with the same preventDefault() pattern.
• Proxy triggers — $("#shortcut").click(function(){ $("#target").contextmenu(); }) — replace inner no-arg .contextmenu() with .trigger("contextmenu").
• Shared eventData — $(".row").contextmenu({ type: "grid" }, fn) passes metadata without closures — migrate to .on("contextmenu", { type: "grid" }, fn).
• Stacked handlers — multiple .contextmenu(fn) calls on one element run in registration order — same as multiple .on("contextmenu", fn) calls.
• Automated testing — test suites may call .contextmenu() to simulate right-clicks — consider .trigger("contextmenu") for explicit intent.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .contextmenu(handler) or .contextmenu(eventData, handler) in new code. Use .on("contextmenu") instead.
• Bind with .contextmenu(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .contextmenu() triggers the event since jQuery 1.0 — prefer .trigger("contextmenu").
• .contextmenu() does not support event delegation — use .on("contextmenu", selector, fn) for dynamic lists.
• Call event.preventDefault() inside the handler to block the browser’s native menu — works with both legacy and modern APIs.
• Left-click handlers (.click() or .on("click")) do not run on right-click — bind contextmenu separately.
• For the full modern contextmenu guide — custom menus, coordinates, and keyboard key — see the jQuery contextmenu event tutorial.

💡 Best Practices