JavaScript Element mousedown Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word MOUSEDOWN

Definition

In JavaScript, the mousedown event fires when a pointing-device button is pressed while the pointer is inside the element (MDN). It fires at the moment of press — before release — unlike click. The event type is a MouseEvent.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for mousedown. Start with this line.

JavaScript
element.addEventListener("mousedown", (event) => { … })
CallWhat it does
element.addEventListener("mousedown", (event) => { … })Primary signature.

Built into the browser. Listen with el.addEventListener("mousedown", …) — no import required.

Library declarations
JavaScript
element.addEventListener("mousedown", (event) => { … })

Parameters

ParameterDescription
Event nameRequired. "mousedown"
Handler propOptional. onmousedown

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Log button

Show which mouse button was pressed.

JavaScript
const stage = document.querySelector("#stage");

stage.addEventListener("mousedown", (event) => {
  const names = ["left", "middle", "right"];
  console.log(names[event.button] || event.button);
});

// optional: stop the browser context menu while testing right-click
stage.addEventListener("contextmenu", (event) => {
  event.preventDefault();
});
Try It Yourself

How It Works

  1. Listen for mousedown. Fires as soon as the button goes down.
  2. Read event.button. 0 / 1 / 2 for left / middle / right.
  3. Map to names. Easier for students than raw numbers.
  4. Optional preventDefault. Stops the context menu while you test right-click.

Example 2 — mousedown vs click

See press-time vs full click-time firing.

JavaScript
const btn = document.querySelector("button");

btn.addEventListener("mousedown", () => {
  console.log("mousedown");
});

btn.addEventListener("click", () => {
  console.log("click");
});
Try It Yourself

How It Works

  1. Press down. mousedown logs immediately.
  2. Release inside. click logs after the full action.
  3. Drag away before release. You may see only mousedown.
  4. Takeaway. Prefer click for activate; use mousedown for press UX.

Example 3 — Press / Release Pair

Start on mousedown, stop on mouseup — classic hold pattern.

JavaScript
const stage = document.querySelector("#stage");
const out = document.getElementById("out");

stage.addEventListener("mousedown", (event) => {
  if (event.button !== 0) return;
  out.textContent = "holding…";
});

stage.addEventListener("mouseup", (event) => {
  if (event.button !== 0) return;
  out.textContent = "released";
});
Try It Yourself

How It Works

  1. Start on mousedown. Press begins the hold.
  2. Filter left button. button === 0 ignores middle/right.
  3. End on mouseup. Release completes the pair.
  4. Use case. Drag start, press-and-hold, custom scrubbers.
Compatibility

Browser Support

Element mousedown is Baseline Widely available (MDN: since July 2015). Safe for press/drag mouse UX in modern and older evergreen browsers.

✓ Baseline · Widely available

Element mousedown

MouseEvent when a pointing-device button is pressed — long-established across browsers.

99% Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
mousedown Baseline

Bottom line: Use mousedown for press/drag start. Prefer click for primary activate actions, and pointerdown when you need touch/pen too.

Frequently Asked Questions

It fires when a pointing-device button is pressed while the pointer is inside the element (MDN). Unlike click, it fires at the moment of press — before release.
No. MDN marks Element mousedown as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A MouseEvent. Useful fields include button, buttons, clientX, clientY, and modifier keys such as ctrlKey and shiftKey.
mousedown fires when the button goes down. click fires after a full press-and-release inside the same element. Prefer click for primary UI actions so keyboard activation is included.
With a physical mouse, mousedown fires for every button press. pointerdown fires only for the first button press; extra buttons held at the same time do not fire more pointerdown events (MDN).
Use it for press feedback, drag start, press-and-hold, or when you need the button identity immediately. Keep primary activate-on-click actions on click.

Next: mouseenter

Learn when the pointer enters an element’s bounds (no bubbling).

mouseenter tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element lostpointercapture Event JavaScript Element mouseenter Event