javascript - 如何在某些情况下取消popState

网址更改(后退或前进)时，将触发popState事件。最近我注意到，例如在http://www.example.com/中:

<a href="#anchor">Top</a>

也会触发popState，导致页面“重新加载”。
我怎么知道它是否是相同的URL，只有#部分已更改？

$(window).bind("popstate",function(){
    swap(location.href);
})

在该示例中，当您单击“顶部”链接(见上文)时，页面将转到#anchor，但是它将触发popState并导致重新加载，这是我所不希望的。

最佳答案

我从事件中找不到任何东西来确定这是否只是一个 anchor 更改，因此我必须自己使用以下代码跟踪它:

function getLocation() {
  return location.pathname + location.search;
}

var currentLocation = getLocation();

$(function() {
  $(window).on("popstate", function() {
    var newLocation = getLocation();
    if(newLocation != currentLocation) {
      // DO STUFF
    }
    currentLocation = newLocation;
  });
})

该位置存储时没有散列，因此，由于单击带有 anchor 的链接而触发popstate时，getLocation方法将返回与以前相同的结果，并且不会发生交换页面的代码。

为了确保正确跟踪当前位置，每当您使用pushState()或replaceState()更改状态时，还需要更新变量。

关于javascript - 如何在某些情况下取消popState，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9731838/