Difference between a pressed back button and a forward button pressed using the history API

Question

I am using api history to enter a new URL into a web page without reloading. I have several buttons that have different functionality.

My script now works with almost no problems. When I click the button, something happens, and when I return, the script starts the event listener without reloading the page.

However, when I press the forward button now, I want to go forward. The URL has been changed correctly to the next, but the event listener still fires as if the back button had been pressed

Example

index1.html: button press -> index2.html -> button press -> index 3.html -> back button pressed -> index2.html -> forward button pressed -> URL is now index3.html, content however is index1.html

I guess this is because I have a listener that listens to the popstate that occurs when the back and forward buttons are clicked. How can I tell which button was pressed?

This is the part that binds the listener.

 if (window.history && window.history.pushState) { $(window).unbind('popstate'); $(window).bind('popstate', function (e) { clearOverlays(); var url = URL $.ajax ( { url : url }).done ( function ( data ) { console.log(data); }); }); }