javascript - 如何在 hashchange 之前执行代码？

Question

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

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

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

还有其他触发方式hashchange吗？

Answer 1

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事件的任何理由。

Answer 2

只有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;
});