jQuery mousedown Event

What You’ll Learn

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

Introduction

Most interactive pages respond to click — the full press-and-release gesture. Sometimes you need to react earlier: the instant the user presses the mouse button, before they release it. That is what mousedown is for — drag handles, drawing tools, press-and-hold menus, and custom sliders all start on mousedown.

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

Understanding the mousedown Event

The mousedown event is sent to an element when the mouse pointer is over the element and the mouse button is pressed. 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 mousedown — left, middle, or right. Use event.which to filter: 1 = left, 2 = middle, 3 = right. jQuery normalizes this property so it works in every browser. If the user presses inside an element but drags away and releases outside, mousedown still fired — most UIs treat that as canceling the press, and no click fires on that element.

📝 Syntax

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

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

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

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

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

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

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

.trigger( "mousedown" )

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

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

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

Official jQuery API examples

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

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

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 event.which button detection and the difference between mousedown and click. Use the Try-it links to run each snippet in the browser.

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

User presses mouse on #target → alert: "Handler for mousedown called."

Fires on press — before the button is released

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

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

Press #target directly → alert runs

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


Programmatic trigger invokes bound handlers

$( "p" )
  .on( "mouseup", function() {
    $( this ).append( " Mouse up. " );
  } )
  .on( "mousedown", 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; // not the left button
  }
  $( this ).addClass( "dragging" );
  $( document ).one( "mouseup", function() {
    $( "#drag-box" ).removeClass( "dragging" );
  } );
} );

Left-click #drag-box → .dragging class added until mouseup anywhere

Right-click or middle-click → ignored (event.which !== 1)


event.which: 1=left, 2=middle, 3=right

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

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

Normal click inside #zone → both "mousedown fired" and "click fired"

Press inside, drag outside, release → only "mousedown fired"


This is why drag UIs start on mousedown, not click

🚀 Common Use Cases

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

📝 Notes

• Bind with .on("mousedown", handler) since jQuery 1.7 — not the deprecated .mousedown(handler) method.
• Trigger with .trigger("mousedown") since jQuery 1.0.
• Any mouse button triggers mousedown — filter with event.which (1=left, 2=middle, 3=right).
• Right-click detection via mousedown is unreliable in some browsers — use contextmenu for custom menus.
• Press inside + release outside still counts as mousedown on that element — click is canceled.
• Any HTML element can receive mousedown — not limited to <button> or <a>.
• Use .off("mousedown") to remove handlers — avoid deprecated .unbind("mousedown").
• For standard button actions, prefer click unless you specifically need press-time behavior.

💡 Best Practices