2

Context: 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.

Question: How can I prevent the default action of Mouse Button 3 (typically Browser Back button) and Mouse Button 4 (typically Browser Froward Button) throughout the entirety of my webpage?

Potential solution: I saw a similar solution involving addEventListener for 'mousedown'(ref) and 'mouseup'(ref) 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 this, but to no avail (I'm a JS noob).

VILLAIN bryan
  • 701
  • 5
  • 24
  • 1
    You should not start futzing around with *specific input device behaviour*. A generic warning when leaving the site using `onbeforeunload` should be enough to cover all possible ways of leaving a site. – deceze Aug 23 '18 at 14:05
  • 2
    [This](https://stackoverflow.com/questions/12381563/how-to-stop-browser-back-button-using-javascript) already answers your question. TLDR: *Client side script does not have the sufficient privilege to do this for security reason.* and *There are numerous reasons why disabling the back button will not really work.* – Fusseldieb Aug 23 '18 at 14:08

1 Answers1

0

You can consider handling the Beforeunload event.

This is what is being fired in order to leave the page (when, for example clicking back button - but it will also handle refresh etc.)

matiit
  • 7,969
  • 5
  • 41
  • 65