jQuery .contextmenu() Method

What Is the .contextmenu() Method?

.contextmenu() is a shorthand for binding or triggering the contextmenu event. With a handler it binds; with no arguments it triggers. Prefer .on / .trigger in new code.

$("#panel").contextmenu(fn)           // bind (deprecated)
$("#panel").contextmenu(data, fn)     // bind + eventData (deprecated)
$("#panel").contextmenu()             // trigger (prefer .trigger)

// Modern:
$("#panel").on("contextmenu", fn)
$("#panel").trigger("contextmenu")

How to Use .contextmenu()

Know the three signatures, then map them to the modern API.

1. Select element(s): $("#panel").
2. Bind (legacy): .contextmenu(function (event) { ... }).
3. Optional data (1.4.3+): .contextmenu({ key: "v" }, handler) → event.data.
4. Trigger (legacy): .contextmenu() with no args — or use .trigger("contextmenu").

Pseudocode

function contextmenu(element, handler?):
    if handler given:
        bind "contextmenu" → handler   // like .on("contextmenu", handler)
    else:
        trigger "contextmenu"          // like .trigger("contextmenu")

// Prefer naming the event explicitly with on / trigger

Cheat Sheet

Quick map from shorthand to modern calls.

Live Preview

Run presets that show bind, eventData, and no-arg trigger via .contextmenu().

Handler ran via .contextmenu(fn).

jQuery Examples

Short snippets for legacy .contextmenu(). Prefer the modern forms in new work — use Try It Yourself to experiment.

$("#target").contextmenu(function () {
  console.log("Handler ran via .contextmenu(fn).");
});

Handler ran via .contextmenu(fn).

$(".panel").contextmenu({ action: "copy" }, function (event) {
  console.log("action:", event.data.action);
  console.log("id:", $(this).data("id"));
});

action: copy
id: a

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

$("#fire").click(function () {
  $("#target").contextmenu();  // same idea as .trigger("contextmenu")
});

Handler for contextmenu called.

// Legacy
$("#legacy").contextmenu(function () {
  console.log("via .contextmenu(fn)");
});

// Modern (use this)
$("#modern").on("contextmenu", function () {
  console.log("via .on(\"contextmenu\", fn)");
});

via .on("contextmenu", fn)

Performance Notes

Switching to .on / .trigger does not slow you down — it clarifies intent and unlocks delegation.

Key Takeaways