jQuery mouseup Event

What You’ll Learn

The mouseup event fires when the user releases a mouse button over an element — the release half of every click. This tutorial covers binding with .on("mouseup"), triggering with .trigger("mouseup"), pairing with mousedown, detecting buttons with event.which, and comparing mouseup with click.

Introduction

Every click is a press followed by a release. The mouseup event is the release half — it fires when the user lets go of the mouse button while the pointer is over an element. Drag handles, drawing tools, and custom sliders finish on mouseup. Pair it with mousedown to track the full press-and-release gesture.

The official jQuery API distinguishes the mouseup event (bound with .on("mouseup") since 1.7) from the deprecated .mouseup() method used in older code. To programmatically fire a handler, use .trigger("mouseup") — available since jQuery 1.0. Any HTML element can receive the mouseup event.

Understanding the mouseup Event

The mouseup event is sent to an element when the mouse pointer is over the element and the mouse button is released. jQuery normalizes this across browsers and gives you a consistent event object with properties like event.which, event.pageX, and event.preventDefault().

Any mouse button triggers mouseup — left, middle, or right. Use event.which to filter: 1 = left, 2 = middle, 3 = right. jQuery normalizes this property across browsers. If the user presses outside an element, drags onto it, and releases, mouseup still fires on that element — but most UIs do not treat that as a click. Prefer click unless you specifically need release-time behavior.

📝 Syntax

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

1. Bind a handler — .on("mouseup" [, eventData ], handler) (since 1.7)

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

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

2. Event delegation — .on("mouseup", selector, handler)

$( "#canvas" ).on( "mouseup", ".handle", function( event ) {
  // runs when any .handle inside #canvas is pressed
} );

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

.trigger( "mouseup" )

• Runs bound mouseup handlers on the matched element(s).
• Use .triggerHandler("mouseup") to run handlers without bubbling or default actions.

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

$( "#target" ).off( "mouseup" );              // remove all mouseup handlers
$( "#canvas" ).off( "mouseup", ".handle", fn ); // remove delegated handler

Official jQuery API examples

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

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

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Examples 4–5 cover document-level release for drag end and the difference between mouseup and click. Use the Try-it links to run each snippet in the browser.

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

User releases mouse on #target → alert: "Handler for mouseup called."

Fires on release — after the button is let go

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

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

Release on #target directly → alert runs

Click #other → $("#target").trigger("mouseup") → same alert


Programmatic trigger invokes bound handlers

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

Press and release on a paragraph:

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


Each press/release cycle appends both labels

$( "#drag-box" ).on( "mousedown", function( event ) {
  if ( event.which !== 1 ) {
    return;
  }
  var $box = $( this );
  $box.addClass( "dragging" );
  $( document ).one( "mouseup", function() {
    $box.removeClass( "dragging" );
  } );
} );

Left mousedown on #drag-box → .dragging class added

Release anywhere (even outside the box) → document mouseup removes .dragging


Binding mouseup on document catches release outside the handle

var $log = $( "#log" );

$( "#zone" )
  .on( "mouseup", function() {
    $log.append( "<p>mouseup fired on zone</p>" );
  } )
  .on( "click", function() {
    $log.append( "<p>click fired on zone</p>" );
  } );

Normal click inside #zone → both "mouseup fired on zone" and "click fired on zone"

Press inside, drag outside, release on #zone edge → mouseup may fire; click on zone does not

Press inside, drag outside, release outside → no events on #zone; click canceled


Prefer click for buttons — use mouseup when release timing matters

🚀 Common Use Cases

• Drag end — $(document).one("mouseup", endDrag) after mousedown on a handle.
• Drawing tools — begin on mousedown, continue on mousemove, finish on mouseup.
• Press feedback — add an active class on mousedown, remove on mouseup on document for instant visual response.
• Custom sliders — track pointer on mousedown + document mousemove/mouseup.
• Proxy triggers — $("#btn").on("click", function(){ $("#target").trigger("mouseup"); }).
• EventData labels — $(".node").on("mouseup", { id: 42 }, fn) to pass metadata without closures.

📝 Notes

• Bind with .on("mouseup", handler) since jQuery 1.7 — not the deprecated .mouseup(handler) method.
• Trigger with .trigger("mouseup") since jQuery 1.0.
• Any mouse button triggers mouseup — filter with event.which (1=left, 2=middle, 3=right).
• Press outside + drag onto element + release still counts as mouseup on that element — usually not treated as a click.
• Any HTML element can receive mouseup — not limited to <button> or <a>.
• Use document-level mouseup to end drags started on mousedown.
• Use .off("mouseup") to remove handlers — avoid deprecated .unbind("mouseup").
• For standard button actions, prefer click unless you specifically need release-time behavior.

💡 Best Practices