JavaScript Element auxclick Event

What You’ll Learn

The auxclick event fires when a non-primary pointer button (middle, right, or other) is pressed and released on the same element. Learn addEventListener vs onauxclick, event.button, how to cancel browser defaults, and how it differs from click—with five examples and try-it labs.

Introduction

The familiar click event covers the primary button (usually left). For every other button—middle-click, right-click, and extra mouse buttons— browsers fire auxclick instead when press and release both happen on the same element.

MDN: auxclick fires after mousedown and mouseup, in that order. That makes it the “click completed” signal for non-primary buttons.

Understanding auxclick

An instance event for non-primary pointer button clicks. It answers: “Did the user click this element with a button other than the primary one?”

• Fires on non-primary button press + release on the same element.
• After mousedown then mouseup.
• PointerEvent today (inherits MouseEvent fields like button).
• Baseline 2024 — newly available across latest browsers since Dec 2024.

📝 Syntax

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

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

onauxclick = (event) => { };

Event type

A PointerEvent (inherits from MouseEvent). Earlier specs used MouseEvent; check compatibility if you rely on Pointer-only fields.

Useful inherited properties

⚠️ Preventing Default Actions

MDN highlights a few browser defaults that pair with non-primary clicks:

• Middle-click open in new tab — usually cancelable with preventDefault() on auxclick.
• Right-click context menu — prevent on contextmenu, not only on auxclick (OS timing differs).
• Middle-button down actions (autoscroll on Windows, paste on some macOS/Linux setups) — prevent on mousedown / pointerdown.

⚖️ auxclick vs click vs contextmenu

🌐 Baseline 2024 (Newly Available)

MDN marks auxclick as Baseline 2024: newly available across the latest devices and browser versions since December 2024. It is not Deprecated, Experimental, or Non-standard—but older browsers may lack support, so feature-detect or provide a fallback if you support legacy clients.

Examples Gallery

Examples follow MDN Element: auxclick event. Try It Yourself labs work best with a multi-button mouse—middle-click or right-click the targets.

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

box.addEventListener("auxclick", () => {
  console.log("auxclick fired");
});

// Middle-click or right-click the box (not left-click).

auxclick fired

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

button.onclick = () => {
  console.log("Primary click (left)");
};

button.onauxclick = () => {
  console.log("Auxiliary click (non-primary)");
};

// Assigning again replaces the previous onauxclick handler.

Primary click (left)
// or
Auxiliary click (non-primary)

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

box.addEventListener("auxclick", (event) => {
  const names = { 1: "middle", 2: "right", 3: "back", 4: "forward" };
  console.log("button:", event.button, names[event.button] || "other");
});

button: 1 middle
button: 2 right

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

function random(number) {
  return Math.floor(Math.random() * number);
}

function randomColor() {
  return `rgb(${random(255)} ${random(255)} ${random(255)})`;
}

button.onclick = () => {
  button.style.backgroundColor = randomColor();
};

button.onauxclick = (e) => {
  e.preventDefault(); // e.g. block middle-click open-in-new-tab when relevant
  button.style.color = randomColor();
};

button.oncontextmenu = (e) => {
  e.preventDefault(); // stop the system right-click menu
};

Left-click: background color changes
Non-primary click: text color changes (menu suppressed)

const box = document.getElementById("box");
const log = [];

["mousedown", "mouseup", "auxclick", "click"].forEach((type) => {
  box.addEventListener(type, (event) => {
    log.push(type + " (button " + event.button + ")");
    console.log(log.join(" → "));
  });
});

// Middle-click the box and watch the sequence.

mousedown (button 1) → mouseup (button 1) → auxclick (button 1)

🚀 Common Use Cases

• Custom middle-click actions on cards or list items.
• Right-click shortcuts that also cancel the system menu.
• Teaching pointer button differences next to click.
• Blocking open-in-new-tab when middle-click should mean something else.
• Handling extra mouse buttons on power-user UIs.

🔧 How It Works

📝 Notes

• MDN: Baseline 2024 (newly available since December 2024).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Primary-button clicks use click, not auxclick.
• Cancel context menus with contextmenu; cancel middle-click navigation with auxclick.
• Related learning: animationstart, addEventListener(), MouseEvent, JavaScript hub.

💡 Best Practices