JavaScript Element mouseup Event

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

Definition

In JavaScript, the mouseup event fires when a pointing-device button is released while the pointer is inside the element (MDN). It is the counterpoint to mousedown. 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 mouseup. Start with this line.

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

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

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

Parameters

ParameterDescription
Event nameRequired. "mouseup"
Handler propOptional. onmouseup

Return Value

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

JavaScript Examples

Example 1 — Log Release Position

Show where the pointer was when the button went up.

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

stage.addEventListener("mouseup", (event) => {
  console.log("released at", event.clientX, event.clientY);
});
Try It Yourself

How It Works

  1. Listen for mouseup. Fires on release inside the element (MDN).
  2. Read clientX/Y. Viewport coordinates at release time.
  3. Not the same as click. Release can happen without a full click sequence.
  4. Primary actions. Prefer click for activate-on-click UI.

Example 2 — Which Button Was Released

Map event.button to primary / middle / secondary.

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

stage.addEventListener("mouseup", (event) => {
  console.log(
    "button=" + event.button,
    "(" + (names[event.button] || "other") + ")",
    "buttons=" + event.buttons
  );
});
Try It Yourself

How It Works

  1. button. Which button just changed (0 / 1 / 2).
  2. buttons. Bitfield of buttons still held after this release.
  3. Every release. Unlike pointerup, each mouse button release fires mouseup.
  4. Right-click note. Context menu may still open separately.

Example 3 — End a Drag on window

Start on primary mousedown; always clear on window mouseup.

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

handle.addEventListener("mousedown", (event) => {
  if (event.button !== 0) return;
  dragging = true;
  console.log("dragging…");
});

window.addEventListener("mouseup", () => {
  if (!dragging) return;
  dragging = false;
  console.log("released — idle");
});
Try It Yourself

How It Works

  1. Start on the handle. Only primary button begins the drag.
  2. End on window. Release can happen outside the handle.
  3. Guard with a flag. Ignore stray mouseups when not dragging.
  4. Still use click for simple button activate — not for drag tracking.
Compatibility

Browser Support

Element mouseup is Baseline Widely available (MDN, since July 2015). It is a standard MouseEvent — not Deprecated, Experimental, or Non-standard.

✓ Baseline · Widely available

Element mouseup

Fires when a pointing-device button is released inside the element. Counterpoint to mousedown.

99% Modern browser support
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
mouseup Excellent

Bottom line: Safe everywhere students build today. Use mouseup for release / drag-end; keep primary activate actions on click.

Frequently Asked Questions

It fires when a pointing-device button is released while the pointer is located inside the element. It is the counterpoint to mousedown (MDN).
No. MDN marks Element mouseup as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A MouseEvent (inherits from UIEvent and Event). Useful fields include button, buttons, clientX, clientY, and modifier keys such as ctrlKey and shiftKey.
mouseup fires when the button goes up. click fires after a completed press-and-release activation (typically after mousedown and mouseup). Prefer click for primary UI actions so keyboard users are included.
With a physical mouse, mouseup fires whenever any button is released. pointerup fires only for the last button release; earlier releases while other buttons remain held do not fire pointerup (MDN).
Use it to end a press, finish a drag, clear pressed styles, or react to a specific button release. Keep primary activate-on-click actions on click.

Next: mousewheel

Learn the legacy Element event for mouse wheel input (and why wheel is preferred).

mousewheel 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 mouseover Event JavaScript Element mousewheel Event