如何在 hashchange 之前执行代码？答案

【问题标题】：How do I execute code before a hashchange?如何在 hashchange 之前执行代码？
【发布时间】：2014-07-20 11:33:44
【问题描述】：

基本上，我想构造一个beforehashchange 事件。我想在hashchange 事件影响页面之前执行代码（即：滚动到目标）。

我所知道的唯一可以改变哈希（并导致hashchange 事件）的事情是：

单击<a href="#foo">，在这种情况下，我可以捕获click 事件，并检查指向哈希的链接。
手动更改 URL 栏中的哈希值，我可能会忽略（除非有人知道在触发 hashchange 之前检测到这一点的方法？）

还有其他方法可以触发hashchange吗？

【问题讨论】：

可以通过脚本修改window.location.hash = "test"
有什么方法可以在不更改我使用window.location.hash的任何地方的代码的情况下将其捕获为一个事件？

标签： javascript

【解决方案1】：

只有hashchange 事件。要在哈希更改之前捕获一些信息，您可以将data-check-hash 之类的属性添加到所有链接标签：

<a href="#test" data-check-hash>foo</a>

$('body').on('click', 'a[data-check-hash]', function(e) {
    e.preventDefault();
    var $item = $(e.currentTarget), 
        hashValue = $item.attr('href').slice(1);

    // here goes your check code before hash change
    window.location.hash = hashValue;
    return false;
});

【讨论】：

【解决方案2】：

我也想知道同样的事情，因为我想在hashchange 事件被触发之前访问滚动位置。

一种解决方案是使用scroll 事件存储滚动位置，然后在hashchange 上对其进行响应。例如，要将滚动位置重置为单击锚点之前的位置，您可以这样做：

var X = 0, Y = 0;
window.addEventListener('scroll', function (e) {
    X = document.body.scrollTop;
    Y = document.body.scrollLeft;
});
window.addEventListener('hashchange', function (e) {
    document.body.scrollTop = X;
    document.body.scrollLeft = Y;
});

除了访问滚动位置之外，我看不出有任何理由需要beforehashchange 事件。

【讨论】：

因为你看不到任何理由，不代表其他人看不到。我正在寻找beforehashchange 事件，以便根据我的应用程序逻辑取消事件hashchange。例如，如果正在填写表单并且用户单击另一个链接，我想请用户确认他是否想离开并导航到该链接并丢失所有信息。