JavaScript Element mouseup Event

What You’ll Learn

The mouseup event fires when a pointing-device button is released inside an element. Learn addEventListener vs onmouseup, button / buttons, how it differs from mousedown, click, and pointerup, drag-end patterns, and five try-it labs.

Introduction

mouseup answers: “Did the user just release a pointing-device button while the pointer was over this element?” It is the counterpoint to mousedown.

A completed left-click usually runs mousedown → mouseup → click. Use mouseup to end a press, finish a drag, or clear pressed styles. Prefer click for primary UI actions so keyboard users are included.

Understanding mouseup

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

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

📝 Syntax

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

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

onmouseup = (event) => { };

Event type

A MouseEvent (inherits from UIEvent and Event).

Handy properties

⚡ When mouseup Fires

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

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

⚖️ mouseup vs Related Events

Examples Gallery

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

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

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

released at 120, 48

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

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

onmouseup button=0

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

stage.addEventListener("mouseup", (event) => {
  event.preventDefault(); // keep secondary release demos quiet
  out.textContent =
    "button=" + event.button +
    " (" + (names[event.button] || "other") + ")" +
    " buttons=" + event.buttons;
});

button=0 (primary) buttons=0

const stage = document.getElementById("stage");
const out = document.getElementById("out");
let mouseCount = 0;
let pointerCount = 0;

stage.addEventListener("mouseup", () => {
  mouseCount++;
  render();
});

stage.addEventListener("pointerup", () => {
  pointerCount++;
  render();
});

function render() {
  out.textContent =
    "mouseup=" + mouseCount + " pointerup=" + pointerCount;
}

mouseup=2 pointerup=1

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 = "released — idle";
});

released — idle

🚀 Common Use Cases

• End a drag or resize session on release.
• Clear pressed / active visual feedback.
• Stop press-and-hold timers when the button goes up.
• Inspect which mouse button was released.
• Teach event order alongside mousedown 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 (pointerup) and capture APIs.
• Release can happen on a different element than the press—listen on window when ending drags.
• Related learning: mousedown, click, mouseover, addEventListener(), JavaScript hub.

💡 Best Practices