jQuery .mouseup() Method — Deprecated Shorthand

What Is the .mouseup() Method?

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

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

// Modern:
$("#box").on("mouseup", fn)
$("#box").trigger("mouseup")

How to Use .mouseup()

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

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

Pseudocode

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

// 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 .mouseup().

Handler ran via .mouseup(fn).

jQuery Examples

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

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

Handler ran via .mouseup(fn).

$(".pad").mouseup({ phase: "end" }, function (event) {
  console.log("phase:", event.data.phase);
  console.log("id:", $(this).data("id"));
});

phase: end
id: box

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

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

Handler for mouseup called.

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

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

via .on("mouseup", fn)

$("p")
  .mousedown(function () {
    $(this).append(" Mouse down.");
  })
  .mouseup(function () {
    $(this).append(" Mouse up.");
  });

Press mouse and release here. Mouse down. Mouse up.

Performance Notes

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

Key Takeaways