JavaScript Element auxclick Event

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

Definition

In JavaScript, the auxclick event fires when a non-primary pointing-device button (any mouse button other than the primary/left button) is pressed and released on the same element (MDN). It fires after mousedown and mouseup, in that order.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for auxclick. Start with this line.

JavaScript
el.addEventListener("auxclick", fn)
CallWhat it does
el.addEventListener("auxclick", fn)Primary signature.

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

Library declarations
JavaScript
el.addEventListener("auxclick", fn)

Parameters

ParameterDescription
Non-primary buttonRequired. Press + release on the same element
preventDefault()Optional. Cancel some browser defaults

Return Value

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

JavaScript Examples

Example 1 — Listen for auxclick

Log when a non-primary button is clicked.

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

box.addEventListener("auxclick", () => {
  out.textContent = "auxclick fired";
});
Try It Yourself

How It Works

  1. Select the element. Any Element can receive auxclick.
  2. Register the listener. Fires for non-primary press+release (MDN).
  3. Use middle or right click in Try It Yourself — left uses click.
  4. Same element both times. Press and release must be on that node.

Example 2 — Read event.button

Tell middle-click from right-click.

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

box.addEventListener("auxclick", (event) => {
  out.textContent = "button = " + event.button;
  // 1 → middle, 2 → right (typical)
});
Try It Yourself

How It Works

  1. Receive a PointerEvent (inherits MouseEvent fields).
  2. Read button. Identifies which non-primary button was used.
  3. Branch in your UI — different actions for middle vs right.
  4. Gaming mice may report other button values (MDN note).

Example 3 — preventDefault + Context Menu

MDN pattern: cancel aux defaults, and separately block the context menu.

JavaScript
const button = document.querySelector("button");

button.addEventListener("auxclick", (event) => {
  event.preventDefault(); // e.g. middle-click open-in-new-tab
  console.log("auxclick handled");
});

button.addEventListener("contextmenu", (event) => {
  event.preventDefault(); // suppress right-click menu (MDN)
});
Try It Yourself

How It Works

  1. Handle auxclick. preventDefault() can stop middle-click new tab (MDN).
  2. Handle contextmenu separately. Menu timing differs by OS (MDN).
  3. Do not rely on auxclick alone to hide the context menu.
  4. For autoscroll/paste, also consider mousedown / pointerdown defaults (MDN).
Compatibility

Browser Support

Element.auxclick is marked Baseline 2024 on MDN (Newly available since December 2024). Logos use the shared browser-image-sprite.png sprite from this project. Older browsers may still lack full support.

✓ Baseline 2024 · Newly available

Element auxclick

Fires for non-primary pointer button clicks — after mousedown and mouseup.

2024 Baseline
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported in modern versions
Full support
Microsoft Edge Supported · Chromium
Full support
Opera Supported · Modern versions
Full support
Internet Explorer Not supported
Not supported
auxclick Baseline 2024

Bottom line: Use for middle/right-click UX in modern browsers. Prefer feature checks in older environments. See the MDN Element auxclick reference.

Frequently Asked Questions

It fires when a non-primary pointing device button (any mouse button other than the primary/left button) is pressed and released on the same element (MDN). Typical cases are middle-click and right-click.
No. MDN marks Element auxclick as Baseline 2024 (Newly available since December 2024). It is not Deprecated, Experimental, or Non-standard.
A PointerEvent (inherits from MouseEvent). Older browsers may expose it as a MouseEvent. Useful fields include button, buttons, clientX/clientY, and modifier keys.
After both mousedown and mouseup have fired, in that order, for the non-primary button press/release on the same element (MDN).
Yes in most browsers that map middle-click to open-in-new-tab: call event.preventDefault() inside the auxclick handler (MDN). To block the right-click context menu, preventDefault on the contextmenu event instead.
click is for the primary button. auxclick is for non-primary buttons. Use click for left-click UI and auxclick for middle/right (and other) buttons.

Next: Element beforeinput

Learn the event that fires before an editable element’s value changes.

beforeinput 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 animationstart Event JavaScript Element beforeinput Event