jQuery mouseup Event

What Is the mouseup Event?

mouseup is sent when the mouse button is released while the pointer is over an element. Bind it with .on("mouseup", handler) (jQuery 1.7+).

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

// Fires on release (any button)
// Prefer on/trigger — not the deprecated .mouseup()
// Left button: event.which === 1

How to Use mouseup

Select an element, bind with .on, optionally check event.which.

1. Select the element(s): $("#box"), $("p"), etc.
2. Bind: .on("mouseup", function (event) { ... }).
3. Optional: gate on event.which === 1 for the left button.
4. To fire in code: .trigger("mouseup"). Unbind with .off("mouseup").

Pseudocode

function onMouseup(element, handler):
    when pointer is over element
     and any mouse button is released:
        handler(event)   // event.which = 1|2|3

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

Cheat Sheet

Keep these facts handy while wiring release handlers.

Live Preview

Run presets that use .on("mouseup") and .trigger("mouseup").

Handler for mouseup called.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

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

Handler for mouseup called.

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

$("#other").on("click", function () {
  $("#target").trigger("mouseup");
});

Handler for mouseup called.

$("#box").on("mouseup", function (event) {
  if (event.which !== 1) {
    return; // ignore middle / right
  }
  console.log("Primary button released");
});

Primary button released

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

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

$("#handle").on("mousedown", function () {
  console.log("Drag start");

  $(document).one("mouseup", function () {
    console.log("Drag end (anywhere)");
  });
});

Drag start
Drag end (anywhere)

Performance Notes

Keep release handlers light. Use .one for one-shot drag-end listeners so they do not linger after the gesture.

Key Takeaways