如何使用JavaScript检测返回按钮或前进按钮的点击？

Question

只是为了确保，我并不是在询问如何捕获浏览器的后退/前进按钮事件。

window.addEventListener('popstate', function (e) {
                       alert("Yahoooo!!!!"); 
                   });

上面的函数会在浏览器的“后退”或“前进”按钮被点击时触发，但我无法检测到是哪个被点击了。是“后退”按钮还是“前进”按钮呢？

有没有特定的事件可以让我检测出是“后退”按钮还是“前进”按钮？

编辑：虽然我很感激关于“重复问题”的建议，但是在stackoverflow上发布的类似问题here已有解答，但该答案是2012年1月的！自那以来发生了很多变化。也许已经有更简单的方法了！

谢谢。

- curiousBoy

---

可能是重复的问题：如何使用HTML5 pushstate检索popstate事件是来自后退还是前进操作？ - pizzarob

被接受的答案是“四年前”的问题，需要“绕路”！现在可能有更简单的方法！ - curiousBoy

我在那里放了一些[最新代码]（https://dev59.com/8Gox5IYBdhLWcg3ww3GV#49329267），以防有所帮助。 - Michael Allan

你得到了这个问题的答案吗？ - Martin AJ

@MartinAJ - 很遗憾，没有.. 这个 是唯一更接近的建议，但不是我想要的。 - curiousBoy

Answer 1

我曾经遇到过同样的问题，但是使用现代 JavaScript 找到了答案。

你可以在这里的 GitHub 链接中获取代码。

你可以使用下面的方法，在任何依赖于 popstate / pushstate 的 js 应用程序中检测浏览器后退和前进按钮的按下：

// e.detail.direction will be the "backward" or "forward" String according the pressed button 
window.addEventListener('nav::user_asked_history', function(e) {
    console.log('nav::direction=', e.detail.direction); 
})

您可以使用以下代码显示/隐藏应用内的返回和前进按钮：

is_nav_forward_possible()
is_nav_backward_possible()

同时，您还可以使用以下方式浏览应用内的用户历史记录：

let nav_position;
let nav_history; 

玩得开心，学好现代 JavaScript！

- Marc Faussurier