JavaScript Element mousedown Event

What You’ll Learn

The mousedown event fires when a pointing-device button is pressed inside an element. Learn addEventListener vs onmousedown, button / buttons, how it differs from click and pointerdown, press-and-hold patterns, and five try-it labs.

Introduction

mousedown answers: “Did the user just press a pointing-device button while the pointer was over this element?” It fires the moment the button goes down—not after release.

That is different from click, which waits for a full press and release inside the same element. Use mousedown for drag start, press feedback, or press-and-hold. Prefer click for primary UI actions so keyboard users are included.

Understanding mousedown

An instance event that answers: “Was a pointing-device button just pressed here?”

• Fires when a button is pressed while the pointer is inside the element.
• MouseEvent — button, buttons, coordinates, modifiers.
• Handler — onmousedown or addEventListener("mousedown", ...).
• Order — usually before mouseup and (if completed) click.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("mousedown", (event) => { });

onmousedown = (event) => { };

Event type

A MouseEvent (inherits from UIEvent and Event).

Handy properties

⚡ When mousedown Fires

• A pointing-device button is pressed while the pointer is inside the element.
• Any mouse button can produce it (primary, middle, secondary)—check event.button.
• It fires immediately on press; release is a separate mouseup event.

A typical completed left-click sequence is: mousedown → mouseup → click.

⚖️ mousedown vs Related Events

Examples Gallery

Examples follow MDN Element: mousedown event. Press a mouse button on the stage elements to trigger events.

const stage = document.getElementById("stage");
const out = document.getElementById("out");

stage.addEventListener("mousedown", (event) => {
  out.textContent =
    "pressed at " + event.clientX + ", " + event.clientY;
});

pressed at 120, 48

const stage = document.getElementById("stage");
const out = document.getElementById("out");

stage.onmousedown = (event) => {
  out.textContent = "onmousedown button=" + event.button;
};

onmousedown button=0

const stage = document.getElementById("stage");
const out = document.getElementById("out");
const names = { 0: "primary", 1: "middle", 2: "secondary" };

stage.addEventListener("mousedown", (event) => {
  event.preventDefault(); // keep secondary press from opening the menu in demos
  out.textContent =
    "button=" + event.button +
    " (" + (names[event.button] || "other") + ")" +
    " buttons=" + event.buttons;
});

button=0 (primary) buttons=1

const stage = document.getElementById("stage");
const out = document.getElementById("out");
const log = [];

["mousedown", "mouseup", "click"].forEach((type) => {
  stage.addEventListener(type, () => {
    log.push(type);
    out.textContent = log.join(" → ");
  });
});

mousedown → mouseup → click

const handle = document.getElementById("handle");
const out = document.getElementById("out");
let dragging = false;

handle.addEventListener("mousedown", (event) => {
  if (event.button !== 0) return;
  dragging = true;
  handle.classList.add("is-dragging");
  out.textContent = "dragging…";
});

window.addEventListener("mouseup", () => {
  if (!dragging) return;
  dragging = false;
  handle.classList.remove("is-dragging");
  out.textContent = "idle";
});

dragging…

🚀 Common Use Cases

• Start a drag or resize session on press.
• Show immediate pressed / active visual feedback.
• Press-and-hold timers (open menus, continuous scrub).
• Inspect which mouse button started an interaction.
• Teach event order alongside mouseup and click.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Primary UI actions: prefer click so keyboard users share the same path.
• For unified mouse/touch/pen, consider Pointer Events ( pointerdown ) and capture APIs.
• Right-click may open a context menu; call preventDefault() only when your demo/app needs it.
• Related learning: mouseup, click, lostpointercapture, auxclick, addEventListener(), JavaScript hub.

💡 Best Practices