(Note: Based on Sharky's feedback, I added code to detect the backspace key)

So, I see these questions on SO a lot, and have recently run into issues controlling the back button functionality myself. After days of searching for the best solution for my application (single page with hashed navigation), I came up with a simple, cross-browser, library-free system to detect the back button.

Most people recommend using:

window.onhashchange = function() {
 //blah blah blah
}

However, this function is also called when the user uses an in-page element that changes the position hash. This is not the best user experience when the user clicks and the page moves back or forward.

To give you a general outline of my system, as the user moves through the interface, I will populate an array with the previous hash values. It looks like this:

function updateHistory(curr) {
    window.location.lasthash.push(window.location.hash);
    window.location.hash = curr;
}

very simple. I do this to ensure cross-browser support as well as support for older browsers. Just pass the new hash value to the function and it will store it for you, then change the hash value (and then put it in the browser's history).

I also took advantage of an in-page back button that uses a lasthash array to move the user between pages. It looks like this:

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    //blah blah blah
    window.location.lasthash.pop();
}

So this moves the user back to the last hash and removes the last hash from the array (I don't have a forward button now).

so. How do I detect if the user used my in-page back button or browser button?

At first I looked at window.onbeforeunload but to no avail - it is only called when the user wants to change the page. This does not happen in a single page application using hash navigation.

So, after some more digging, I saw the suggestion to try setting a flag variable. In my case, the problem was that I would try to set it, but since everything is asynchronous, it wouldn't always be set in time for the if statement in the hash change. .onMouseDown is not always called in click , and adding it to onclick will never trigger it quickly enough.

That's when I started researching the difference between documents and windows. My final solution was to set the flag using document.onmouseover and disable it using document.onmouseleave.

What happens is that when the user's mouse is within the document area (read: the rendered page, but not the browser frame), my boolean is set to true. Once the mouse leaves the document area, the boolean value flips to false.

In this way, I can change window.onhashchange to:

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

You will notice the check for #undefined. This is because if there is no history available in my array it returns undefined. I use this to ask the user if they want to leave using the window.onbeforeunload event.

So, in a nutshell, for anyone who doesn't necessarily use an in-page back button or an array to store history:

document.onmouseover = function() {
    //User's mouse is inside the page.
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    //User's mouse has left the page.
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        //Your own in-page mechanism triggered the hash change
    } else {
        //Browser back button was clicked
    }
}

This is what you want. A simple three-part approach to detecting back button usage versus in-page elements in terms of hash navigation.

edit: