javascript - Is it possible to get mouse buttons 4, 5, etc? - Stack Overflow

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?

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?

• javascript
• mouselistener

Share Improve this question Follow edited Apr 11, 2016 at 15:57 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Apr 11, 2016 at 15:45 Gregory SimsGregory Sims 56111 gold badge88 silver badges1919 bronze badges 2

• 4 developer.mozilla/en-US/docs/Web/API/MouseEvent/button – Groben Commented Apr 11, 2016 at 15:51
• 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/TR/DOM-Level-3-Events/#events-mouseevents – Korgrue Commented Apr 11, 2016 at 15:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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/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>

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);
        }
    }
}