Is it possible to get mouse buttons 4, 5, etc?

Question

Simply put, is there any way to detect additional mouse button presses in JavaScript? It's not documented with the rest of the mouse input, so I guess it's not in standard implementation.

Is there any way, such as a library, which can enable extra mouse buttons?

Wellborn

developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button – Smarm

The working draft of the spec is found at the link below - the mozilla implementation of detecting auxiliary button clicks as described in the link provided by @Briggy should work cross browser. w3.org/TR/DOM-Level-3-Events/#events-mouseevents – Unceasing

Answer 1

Yes you could do this, check MouseEvent.button, see example below that will detect 3 and 4 buttons click.

Some pointing devices provide or simulate more buttons. To represent such buttons, the value must be doubled for each successive button (in the binary series 8, 16, 32, ... ) as mentioned in https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevents

var whichButton = function (e) {
    // Handle different event models
    var e = e || window.event;
    var btnCode;

    if ('object' === typeof e) {
        btnCode = e.button;

        switch (btnCode) {
            case 3:
                console.log('Browser Back button clicked.');
            break;

            case 4:
                console.log('Browser Forward button clicked.');
            break;

            default:
                console.log('Unexpected code: ' + btnCode);
        }
    }
}

<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Click with mouse...</button>

Icterus

To represent such buttons, the value must be doubled for each successive button (in the binary series 8, 16, 32, ... ) check my update. – Icterus

This doesn't seem to actually work, for me, using Chrome, IE, Edge, Firefox or Opera. – Wellborn

As implied by the switch statement's contents, mouse buttons 3 and 4 are already binded to the browser's back and forward actions in Chrome, Firefox, and Edge (and I presume more). I have created this CodePen to add an e.preventDefault(); under the var e declaration to suppress the binded browser action. I have verified this works in Chrome 71, but unfortunately in both FireFox 65 and Edge 42, e.preventDefault() does not suppress the binded browser action. Does anyone know a way to suppress it in all browsers? – Mislead

Answer 2

var whichButton = function (e) {
    // Handle different event models
    var e = e || window.event;
    var btnCode;

    if ('object' === typeof e) {
        btnCode = e.button;

        switch (btnCode) {
            case 3:
                console.log();
            break;

            case 4:
                console.log();
            break;

            default:
                console.log('Unexpected code: ' + btnCode);
        }
    }
}

Awoke

Always include the test to explain your code's logic, otherwise, it may not help other – Onceover