HTML onmousedown Attribute

Introduction

The onmousedown attribute is an inline event handler for the mousedown event. It runs when the user presses a mouse button down over an element — before they release it. That makes it useful for press effects, starting drag operations, or reacting the instant a button is held. It is not the same as onclick, which fires only after a full press-and-release. Pass event to read event.button (left, middle, or right). For most button actions, prefer onclick; use onmousedown when you need the earliest pointer-down moment.

What You’ll Learn

Purpose of onmousedown Attribute

The primary purpose of onmousedown is to run code at the start of a mouse interaction — when the button goes down, not when the click completes. Common uses include visual “pressed” styling, initiating drag-and-drop, drawing tools, or slider handles that track while the button is held.

The typical mouse sequence on one element is: mousedown → (optional mousemove) → mouseup → click. If the pointer leaves the element before release, click may not fire — but mousedown already did.

📝 Syntax

Set onmousedown on any element that should respond to a mouse press:

<button type="button" onmousedown="handleMouseDown(event)">
  Press me
</button>

<div onmousedown="startDrag(event)">Drag handle</div>

Syntax Rules

• Value is JavaScript executed when the mousedown event fires.
• Works on most elements: button, div, a, input, etc.
• Pass event to read event.button, clientX, clientY.
• Fires before mouseup and click on the same element.
• Use type="button" on buttons inside forms to avoid accidental submit.
• Modern alternative: el.addEventListener("mousedown", handler).
• Pair with onmouseup or document listeners for drag logic.

💎 Values

The onmousedown attribute accepts a string of JavaScript code:

• onmousedown="handleMouseDown(event)" — Pass the event object.
• onmousedown="handleMouseDown()" — Works if the function does not need event data.
• JavaScript: btn.onmousedown = (e) => { … } — property assignment.

element.addEventListener("mousedown", (event) => {
  // 0 = primary (left), 1 = middle, 2 = secondary (right)
  if (event.button === 0) {
    status.textContent = "Left button pressed";
  }
});

Applicable Elements

onmousedown vs onclick vs onmouseup

Examples Gallery

Inline press feedback, addEventListener with event.button, and mousedown + mouseup press state.

<button type="button" onmousedown="handleMouseDown()">
  Press me
</button>
<p id="status"></p>

<script>
  function handleMouseDown() {
    document.getElementById("status").textContent =
      "mousedown: Mouse button pressed!";
  }
</script>

<button type="button" id="dynamicButton">
  Dynamic press
</button>

<script>
  document.getElementById("dynamicButton").addEventListener("mousedown", function (event) {
    document.getElementById("log").textContent =
      "Button " + event.button + " pressed";
  });
</script>

const box = document.getElementById("box");

box.addEventListener("mousedown", () => {
  box.classList.add("pressed");
  box.textContent = "Pressed…";
});

box.addEventListener("mouseup", () => {
  box.classList.remove("pressed");
  box.textContent = "Release me";
});

♿ Accessibility

• Prefer onclick for actions — Keyboard users activate with Enter/Space on buttons; mousedown alone does not cover keyboard.
• Use semantic <button> — Not a bare div unless you add tabindex, roles, and keyboard handlers.
• Do not rely on mouse only — Touch devices fire different pointer events; test on mobile.
• Avoid blocking context menu — Right-click uses button 2; use oncontextmenu for custom menus, not only mousedown.
• Visible focus states — Press effects should not remove focus outlines.

💡 Best Practices