stop firing popstate on hashchange

Question

I am working with the History API and using push and pop state. I want to stop the popstate event from firing in some scenario where I am only appending the hash to URL. for example in some cases on click of anchor it appends # to the URL and popstate is immediately fired) I want to avoid all the scenarios where # or #somehasvalue is appended to the URL and stop popstate from firing. I am mainitaing the URL's with query parameters and I do not have any scenario where I need the popstate event to fire with # in the URL.

Here is my code.

if (supportsHistoryApi()) {

    window.onpopstate = function (event) {
    var d = event.state || {state_param1: param1, state_param2: param2};                       
    var pathName = window.location.pathname,
        params   = window.location.search;

    loadData(event, pathName + params, d.state_param1, d.state_param2);

}

score 14 · Answer 1 · answered Oct 16 '15 at 11:15

14

As far as I found you cannot stop the popstate from firing unfortunately.

What you can do is check for the event.state object. That will be null on a hash change. So I'd suggest adding a

if(event.state === null) {
   event.preventDefault();
   return false;
}

To your popstate event handler at the very beginning. I think that's the best way to prevent firing of the popstate handling code on your side when the hash changes, but i'd be interested to know if there are other solutions.

answered Oct 16 '15 at 11:15

Tschallacka

24,188
10
79
121

5

This doesn't work when you return to the first page you opened. Because then the `state` is also `null`, but still no hashchange – Hugo Delsing Oct 24 '17 at 11:53
2

@HugoDelsing, Maybe always `replaceState` at page load? – Gust van de Wal Sep 20 '20 at 11:55
btw, `popState` event is [not cancelable](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event), so `preventDefault`-ing it does nothing. Checking for `null` in combination with calling `replaceState` on page load seems to work fine though. – Nikita May 06 '21 at 04:16

score 2 · Answer 2 · answered Feb 29 '20 at 21:50

I have a solution!

When popstate event calls, check the pathname if it has changed, or just the hash changed. Watch below how it works for me:

        window.pop_old = document.location.pathname;
        window.pop_new = '';
        window.onpopstate = function (event) {

            window.pop_new = document.location.pathname;

            if(pop_new != pop_old){

                //diferent path: not just the hash has changed

            } else {

                //same path: just diferent hash

            }

            window.pop_old = pop_new; //save for the next interaction

        };

score 1 · Answer 3 · edited Feb 15 '19 at 16:21

1

In case someone still need this:

var is_hashed = false;

$(window).on('hashchange', function() {
    is_hashed = true;
});

window.addEventListener('popstate', function(e){
    // if hashchange
    if (is_hashed) {
        e.preventDefault();
        // reset
        is_hashed = false;
        return false;
    }

    // Your code to handle popstate here
    ..................
});

edited Feb 15 '19 at 16:21

Eric Aya

68,765
33
165
232

answered Feb 15 '19 at 16:09

webinpixels

11
1
1

1

I can't make it work. Using Chrome 85. The popstate event occurs before hashchange – ZalemCitizen Oct 09 '20 at 09:33

Valentine Shi · Answer 4 · 2019-05-08T07:41:53.913

This is pretty simple.

To prevent the popstate event to fire after you click a link with hash you have to eliminate the concequence of clicking the link - which is the addition of the hash to the browser address bar.

Basically you have to create the handler for click event, check if the click is on the element you whant to prevent a hash to appear in the URL and prevent hash to appear by calling event.preventDefault(); in the handler.

Here is the code example:

/**
 * This your existing `onpopstate` handler.
 */
window.onpopstate = function(e) {
    // You could want to prevent defaut behaviour for `popstate` event too.
    // e.preventDefault(); 
    // Your logic here to do things. 

    // The following reload is just an example of what you could want to make
    // in this event handler.
    window.location.reload();
};

/**
 * This is the `click` event handler that conditionally prevents the default
 * click behaviour.
 */
document.addEventListener('click', function(e) {
    // Here you check if the clicked element is that special link of yours.
    if (e.target.tagName === "A" && e.target.hash.indexOf('#the-link-i-want-make-discernable') > -1) {
        // The 'e.preventDefault()' is what prevent the hash to be added to
        // the URL and therefore prevents your 'popstate' handler to fire.
        e.preventDefault();
        processMySpecialLink(e, e.target);
    }

});

/**
 * Just an example of the link click processor in case you want making something
 * more on the link click (e.g. smooth scroll to the hash).
 */
function processMySpecialLink(e, target) {
    // Make things here you want at user clicking your discernable link.
}

Here is the matching HTML markup:

<!-- Somewhere in the markup -->
<span id="the-link-i-want-make-discernable"></span>
<!-- Some markup -->
<a href="#the-link-i-want-make-discernable">My Special Link</a>
<!-- Another markup -->
<a href="#just-common-link">Any other link</a>

This all does what is described above: prevents the default behaviour for a special hash link. As a side effect it makes no popstate event to fire as no hash is added to URL for the special case of clicking the #the-link-i-want-make-discernable hash link.

stop firing popstate on hashchange

4 Answers4

Linked