Search code examples
firefoxbrowsercross-browsermouseeventmouse

How to get Mouse buttons 4 / 5 (Browser back / Browser forward) working in Firefox?

First, I need to say that I'm aware there is some confusion as to what button numbering scheme convention is used for these "Browser back" and "Browser forward" mouse buttons depending on whether you use numbering starting from zero 0 or one 1. Since this question is about Firefox, I'll go by Mozilla's numbering scheme here.

I've been struggling with an issue seen only in Firefox where Mouse buttons 4 (back) and 5 (forward) appear to Firefox as if they were a button 2 click (Middle button click) event. Pressing either button 4 or 5 results in the circular "autoscrolling" icon with Up and Down arrows appearing:

Firefox autoscroll icon

I've done some debugging using this Mouse Event Test Page. Results are different between Chrome and Firefox. It appears that the "which" JS event attribute numbers these as 4 and 5, while the button attribute numbers them as 3 and 4. Regardless, Google Chrome interprets them as "Browser back" and "Browser Forward" buttons correctly, while Firefox does not.

  • Chrome:

    • Mouse Button "4" (back)

      mousedown   which=4 button=3 buttons=8
mouseup     which=4 button=3 buttons=0

    • Mouse Button "5" (forward)

      mousedown   which=5 button=4 buttons=16
mouseup     which=5 button=4 buttons=0

    • Mouse Button "2" (middle click)

      mousedown   which=2 button=1 buttons=4
mouseup     which=2 button=1 buttons=0

  • Firefox:

    • Mouse Button "4" (back)

      mousedown   which=2 button=1 buttons=8
mouseup     which=2 button=1 buttons=0

    • Mouse Button "5" (forward)

      mousedown   which=2 button=1 buttons=16
mouseup     which=2 button=1 buttons=0

    • Mouse Button "2" (middle click)

      mousedown   which=2 button=1 buttons=4
mouseup     which=2 button=1 buttons=0

As the page says, not all browsers work correctly. It also states:

However, in some browsers, the defaults cannot be disabled, so various strange side effects may occur.

In Firefox, I notice clicking with all three of these buttons launches a new tab with javascript:void(null). This is the same as the link's URL attribute (href="javascript:void(null)"), as we can see from that page's source code. So this behavior is consistent with a Middle Button Click event, which usually will launch a new tab with that URL.

Is it possible to get these buttons for "Browser Back" and "Browser Forward" working properly in Firefox?

Solution

  • GOOD NEWS: Bug Fixed in FF 92

    The bug is fixed and the fix will be included in Firefox version 92 which will be released in early September 2021.

    In the current Nightly Build (version 92) it is already working and you can use the Mouse Buttons 4 and 5 as expected for browser navigation back and forward.
    I tested it with MacOS and an ordinary Dell mouse.

    UPDATE (September 7, 2021)

    Firefox 92 was released today as described earlier and the mouse buttons 4 and 5 work like a charm 🥳
    Case closed.