Is it possible to target ONLY the browser back button, using popstate?

Question

I am trying to alert the user when using the browser back button to save their changes. I am currently using the 'popstate' event listener, which works well, however once the user has confirmed the message to say they're about to leave the page, if they press the browser forward arrow they are presented with the same confirm message which is misleading.

Is there any way to only use this on the browsers back button?

Below find my current code (I am also using React hooks for this)

Thanks!

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

  useEffect(() => {
    window.addEventListener('popstate', function (event) {
      if (event.state) {
        confirm("Do you want to leave this page?");
      }
    }, false);
  }, [])

Not sure about Popstate, but you should be aware browsers are against this practice. (Read [this answer](https://stackoverflow.com/a/38880926/7314155) for a good explaination) — John Pavek, Nov 18 '19 at 15:50
Push a state onload (an empty one for ex.) and compare the event.state and the empty one together. — Tim Vermaelen, Nov 18 '19 at 15:51
@TimVermaelen would it be possible for you to show me a code example of this please? — mark, Nov 18 '19 at 16:02
https://stackoverflow.com/questions/20156939/how-to-handle-back-button-while-changing-the-browser-url-with-html5-pushstate/20157851#20157851 — Tim Vermaelen, Nov 19 '19 at 10:43

Is it possible to target ONLY the browser back button, using popstate?

0 Answers0