title: How to get Mouse buttons 4 / 5 (Browser back / Browser forward) working in Firefox?
body: <p>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 <code>0</code> or one <code>1</code>.  Since this question is about Firefox, I'll go by <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons" rel="noreferrer">Mozilla's numbering scheme here</a>.</p>
  
  <p>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:</p>
  
  <p><img src="https://www.howtogeek.com/wp-content/uploads/2008/03/image136.png" alt="Firefox autoscroll icon"></p>
  
  <p>I've done some debugging using <a href="https://unixpapa.com/js/testmouse.html" rel="noreferrer">this Mouse Event Test Page</a>.  Results are different between Chrome and Firefox.  It appears that the "<code>which</code>" JS event attribute numbers these as <code>4</code> and <code>5</code>, while the <code>button</code> attribute numbers them as <code>3</code> and <code>4</code>.  Regardless, Google Chrome interprets them as "Browser back" and "Browser Forward" buttons correctly, while Firefox does not.</p>
  
  <ul>
  <li><p>Chrome:</p>
  
  <ul>
  <li><p>Mouse Button "<code>4</code>" (back)</p>
  
  <pre><code>mousedown   which=4 button=3 buttons=8
  mouseup     which=4 button=3 buttons=0
  </code></pre></li>
  <li><p>Mouse Button "<code>5</code>" (forward)</p>
  
  <pre><code>mousedown   which=5 button=4 buttons=16
  mouseup     which=5 button=4 buttons=0
  </code></pre></li>
  <li><p>Mouse Button "<code>2</code>" (middle click)</p>
  
  <pre><code>mousedown   which=2 button=1 buttons=4
  mouseup     which=2 button=1 buttons=0
  </code></pre></li>
  </ul></li>
  <li><p>Firefox:</p>
  
  <ul>
  <li><p>Mouse Button "<code>4</code>" (back)</p>
  
  <pre><code>mousedown   which=2 button=1 buttons=8
  mouseup     which=2 button=1 buttons=0
  </code></pre></li>
  <li><p>Mouse Button "<code>5</code>" (forward)</p>
  
  <pre><code>mousedown   which=2 button=1 buttons=16
  mouseup     which=2 button=1 buttons=0
  </code></pre></li>
  <li><p>Mouse Button "<code>2</code>" (middle click)</p>
  
  <pre><code>mousedown   which=2 button=1 buttons=4
  mouseup     which=2 button=1 buttons=0
  </code></pre></li>
  </ul></li>
  </ul>
  
  <p>As <a href="https://unixpapa.com/js/testmouse.html" rel="noreferrer">the page says</a>, not all browsers work correctly. It also states:</p>
  
  <blockquote>
    <p>However, in some browsers, the defaults cannot be disabled, so various strange side effects may occur.</p>
  </blockquote>
  
  <p>In Firefox, I notice clicking with all three of these buttons launches a new tab with <code>javascript:void(null)</code>.  This is the same as the link's URL attribute (<code>href="javascript:void(null)"</code>), 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.</p>
  
  <p>Is it possible to get these buttons for "Browser Back" and "Browser Forward" working properly in Firefox?</p>