Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Window.onpopstate it's activated with all href links

I'm implementing a pagination using jquery ajax but manipulating the history of the browser.. and works fine so far but I realized a few hours ago that if I have a link in any part of my page

<a href="#">My link</a>

And make a click on this link, the function window.onpopstate is called but I don't know why, and this happens with all A HREF of my website.

This is my function, detecting the current state to call to specific functions and load data by country or search term or the parameter of the url specified.

window.onpopstate = function(event) {
    console.log(event);
    var section = $('#wrapper section').attr('id');

    if(event && event.state) {


        //State for Reviews pagination ?page=x
        if (event.state.type == 'pagination') {
            popStateShopPage(event.state);
        }

        //State for Reviews pagination by country ?country=MX&page=x
        if (event.state.type == 'country') {
            popStateShopPageCountry(event.state);
        }

        //State for Reviews pagination by search ?search=hello&page=x
        if (event.state.type == 'search') {
            popStateShopPageSearch(event.state);
        }

    } else {

        if (section == 'shop-page') {
            popStateShopPage(1);
        }

        history.pushState(null);
    }
}

And I'm using these functions to push the state

history.pushState({type: 'pagination', page: number_page}, "", "?page="+number_page);
history.pushState({type: 'country', page: number_page, country: country}, "", "?country="+country+"&page="+number_page);
history.pushState({type: 'search', page: number_page, term: term}, "", "?search="+term+"&page="+number_page);
like image 610
SoldierCorp Avatar asked Oct 01 '14 17:10

SoldierCorp


1 Answers

As it is stated in MSDN Mozilla Network:

1.The popstate event is fired when the active history entry changes. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState(), the popstate event's state property contains a copy of the history entry's state object.

2.Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as a click on the back button (or calling history.back() in JavaScript).

The reason window.onpopstate fires is because, first, the history has been changed when you click on the anchor tag; and second, you are doing a browser action.

In my opinion nothing can be done to avoid this, as it is stated in JavaScritp The Definitive Guide:

Some events cause an associated default action to be performed by the web browser. For example, when a click event occurs on an tag, the browser's default action is to follow the hyperlink. Default actions like these are performed only after all three phases of event propagation complete, and any of the handlers invoked during event propagation have the opportunity to prevent the default action from occurring by calling the preventDefault( ) method of the Event object.

The three phases are: capturing, targeting and bubbling.

Hope it's useful!

like image 138
Academia Avatar answered Oct 07 '22 18:10

Academia