HTML onmouseup Attribute

Introduction

The onmouseup attribute is an inline event handler for the mouseup event. It runs when the user releases a mouse button while the pointer is over an element. That makes it useful for ending press effects, finishing drag operations, or detecting release after onmousedown. It is not the same as onclick, which fires only after a complete press-and-release on the same element. Pass event to read event.button and pointer position. For drags, attach mouseup to document so release outside the element still runs your cleanup code.

What You’ll Learn

Purpose of onmouseup Attribute

The primary purpose of onmouseup is to run code when a mouse button is released. Common uses include clearing a “pressed” visual state, stopping a drag, completing a slider handle move, or logging that the user finished a press gesture.

In the typical sequence on one element: mousedown → (optional mousemove) → mouseup → click. If the pointer leaves the element before release, mouseup may fire on a different element — which is why drag code listens on document.

📝 Syntax

Set onmouseup on any element that should respond when a mouse button is released:

<button type="button" onmouseup="handleMouseUp(event)">
  Release here
</button>

<div
  onmousedown="startPress(this)"
  onmouseup="endPress(this)">
  Press and release
</div>

Syntax Rules

• Value is JavaScript executed when the mouseup event fires.
• Works on most elements: button, div, a, etc.
• Pass event for button, clientX, clientY.
• Fires after mousedown on the same gesture.
• Fires before click when both occur on the same element.
• Use type="button" on buttons inside forms to avoid accidental submit.
• Modern alternative: el.addEventListener("mouseup", handler).

💎 Values

The onmouseup attribute accepts a string of JavaScript code:

• onmouseup="handleMouseUp(event)" — Pass the event object.
• onmouseup="endPress(this)" — Reset the element that received release.
• JavaScript: btn.onmouseup = (e) => { … } — property assignment.

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

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

// Drag: listen on document so release anywhere ends drag
document.addEventListener("mouseup", () => {
  dragging = false;
});

Applicable Elements

onmouseup vs onmousedown vs onclick

Examples Gallery

Status on release, addEventListener with event.button, and mousedown + mouseup press state.

<button type="button" onmouseup="handleMouseUp()">
  Release me
</button>
<p id="status"></p>

<script>
  function handleMouseUp() {
    document.getElementById("status").textContent =
      "mouseup: Mouse button released!";
  }
</script>

<button type="button" id="dynamicButton">
  Release mouse here
</button>

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

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

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

♿ Accessibility

• Prefer onclick for actions — Keyboard users activate with Enter/Space; mouseup alone does not cover keyboard.
• Use semantic <button> — Not a bare div unless you add keyboard support.
• Do not rely on mouse-only release — Touch devices use different pointer events.
• Keep focus visible — Press effects should not remove focus outlines.
• Provide keyboard alternatives for drag or slider UX built on mouseup.

💡 Best Practices