HTML onauxclick Event Attribute

The onauxclick attribute in HTML is an event handler that triggers a JavaScript function when a user clicks on a mouse button other than the primary (usually left) button, typically the middle button (wheel) or right button. It is a modern alternative to using onclick for non-primary buttons, allowing more precise handling of auxiliary mouse clicks.

Basic Syntax

<element onauxclick="javascriptFunction(event)">

• element: Any HTML element that can respond to mouse events (e.g., <button>, <div>, <a>).
• javascriptFunction(event): The JavaScript code or function to execute when the event occurs. The event object gives you access to additional information, such as which mouse button was pressed.

Event Object Properties

When onauxclick is triggered, it passes a MouseEvent object with useful properties:

• event.button → Indicates which mouse button was pressed:

  • 0 = Primary (left) button
  • 1 = Auxiliary (middle/wheel) button
  • 2 = Secondary (right) button

• event.ctrlKey, event.shiftKey, event.altKey → Boolean values indicating if modifier keys were pressed.

• event.clientX / event.clientY → Mouse cursor coordinates.

Key Points

1. Purpose: Unlike onclick, which primarily handles left-clicks, onauxclick allows you to respond to middle and right mouse clicks without interfering with contextmenu or default behaviors.
2. Browser Support: Modern browsers support it, including Chrome, Edge, and Firefox. However, some older browsers may not recognize it.
3. Default Behavior: Clicking the middle button usually opens links in a new tab. You can prevent this using event.preventDefault() inside the handler.

Example 1: Basic Usage

<button onauxclick="alert('Auxiliary button clicked!')">
  Click me with middle or right mouse button
</button>

• Left-click does nothing.
• Middle or right-click triggers the alert.

Example 2: Detecting Which Button Was Clicked

<div onauxclick="handleAuxClick(event)" style="padding:20px; border:1px solid black; width:200px; text-align:center;">
  Right or Middle Click Me
</div>

<script>
function handleAuxClick(event) {
    if (event.button === 1) {
        alert('Middle button clicked!');
    } else if (event.button === 2) {
        alert('Right button clicked!');
    }
    event.preventDefault(); // prevent default actions like opening context menu
}
</script>

• This example detects whether the middle or right mouse button was clicked and prevents the browser’s default action.

Use Cases

• Opening links in a custom way when middle-clicked.
• Custom context menus without relying solely on contextmenu.
• Detecting middle-clicks for custom actions like opening tabs or copying data.

Difference Between onclick, oncontextmenu, and onauxclick