jQuery mousedown Event

What Is the mousedown Event?

mousedown is sent when the mouse button is pressed while the pointer is over an element — before release. Bind it with .on("mousedown", handler) (jQuery 1.7+).

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

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

How to Use mousedown

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

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

Pseudocode

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

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

Cheat Sheet

Keep these facts handy while wiring press handlers.

Live Preview

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

Handler for mousedown called.

jQuery Examples

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

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

Handler for mousedown called.

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

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

Handler for mousedown called.

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

Primary button pressed

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

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

$("#list").on("mousedown", "li", function () {
  console.log("Press: " + $(this).text());
});

// Later…
$("#list").append("<li>New item</li>");
// New item works too — no extra bind

Press: New item

Performance Notes

Delegation scales better than binding hundreds of individual press handlers. Always .off when removing long-lived widgets to avoid leaks.

Key Takeaways