title: Preventing Mouse Back/Forward Buttons
body: <p><strong>Context</strong>: We have an immersive game deployed in JS/HTML thanks to GWT. Users have complained about accidentally pressing their Back/Forward mouse buttons while playing, causing them to leave the page unintentionally during action. We want to prevent the default action of these mouse buttons, or come up with some solution that (would normally be annoying and intrusive) which alerts/warns the user with a pop-up stating they are about to leave the game if they hit OK.</p>
  
  <p><strong>Question</strong>: How can I prevent the default action of <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button" rel="nofollow noreferrer">Mouse Button 3 (typically Browser Back button) and Mouse Button 4 (typically Browser Froward Button)</a> throughout the entirety of my webpage?</p>
  
  <p><strong>Potential solution</strong>: I saw a similar solution involving addEventListener for <code>'mousedown'</code>(<a href="https://developer.mozilla.org/en-US/docs/Web/Events/mousedown" rel="nofollow noreferrer">ref</a>) and <code>'mouseup'</code>(<a href="https://developer.mozilla.org/en-US/docs/Web/Events/mouseup" rel="nofollow noreferrer">ref</a>) with a subsequent call to a function that triggers event.preventDefault() and event.stopPropagation() perhaps, but am not seeing something similar for the mouse Back and Forward functionality. Also tried something like <a href="https://jsfiddle.net/q1jbkyvt/" rel="nofollow noreferrer">this</a>, but to no avail (I'm a JS noob).</p>