javascript 无法直接监听前进/后退按钮点击，但可通过 popstate 事件配合 pushstate/replacestate 感知历史导航；需手动维护 state 标识并对比判断方向，首次加载应调用 replacestate 初始化状态。

JavaScript 中无法直接监听“前进”或“后退”按钮的点击事件，因为浏览器不暴露这类 UI 按钮的 DOM 事件。但可以通过 popstate 事件配合 history.pushState() 或 history.replaceState() 来感知导航行为（包括前进、后退、以及 JS 主动触发的历史跳转）。

监听 history 变化：使用 popstate 事件

popstate 是唯一能捕获浏览器历史栈变化的原生事件，它在用户点击前进/后退按钮、调用 history.back()/history.forward()，或执行 history.pushState()/history.replaceState() 后触发（注意：仅当历史记录条目关联了 state 对象时，Chrome 等现代浏览器才会在页面加载时也触发一次 popstate）。

基本用法：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

window.addEventListener('popstate', (event) => {
  console.log('当前 state:', event.state);
  // 根据 event.state 做相应处理，比如更新页面内容
});

必须配合 state 使用才能可靠识别导航方向

popstate 本身不提供“是前进还是后退”的信息。你需要自己维护一个历史索引或时间戳，并在每次 pushState 时记录状态，再通过对比当前 state 和上一次 state 判断方向。

• 在首次进入页面或初始化时，用 history.replaceState() 设置初始 state，避免空 state 干扰
• 每次路由变更（如点击链接、提交表单）都用 pushState({ id: Date.now(), ... }) 存入唯一标识
• popstate 触发时，比较当前 event.state.id 与上一次记录的 id 大小关系：变大可能是前进，变小可能是后退（需结合实际业务逻辑校验）

注意兼容性与常见陷阱

popstate 在页面首次加载时是否触发，取决于浏览器实现和是否设置了 state。为确保一致性：

• 始终在页面加载完成后立即调用 history.replaceState(state, '', location.href) 初始化历史状态
• 不要依赖 popstate 区分“用户点击按钮”和“JS 调用 back()”，它们触发的行为完全一致
• SPA 框架（如 React Router、Vue Router）底层正是基于 popstate + pushState 封装的，推荐优先使用成熟路由库而非手动监听

替代方案：监听页面可见性变化（辅助判断）

虽然不能监听按钮，但可结合 pagehide / pageshow 事件粗略感知用户离开/返回当前页（例如切到其他 tab 后再回来），但这不属于前进后退范畴，仅作补充参考：

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    console.log('页面从 bfcache 恢复，可能涉及后退');
  }
});

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南