JavaScript 无法真正拦截浏览器返回操作，但可通过 history.pushState() 和 popstate 事件实现感知与自定义响应；需在关键操作前调用 pushState 添加历史记录，再通过监听 popstate 事件执行确认、恢复或跳转等逻辑，避免在回调中无条件调用 back/forward 导致循环。
JavaScript 无法真正“拦截”浏览器的返回操作（比如点击返回按钮或按 Alt+←），但可以通过 history.pushState() 和 popstate 事件配合，实现“感知返回动作 + 自定义行为”的效果。关键不是阻止返回，而是接管导航逻辑，让用户感觉返回被“控制”了。
用 pushState 替换当前历史记录
在用户执行关键操作（如填写表单、进入支付页）前，调用 pushState 向浏览器历史栈添加一条新记录。这样当用户点击返回时，实际触发的是 popstate 事件，而非直接跳转上一页。
- 不改变 URL 也能生效：可以传入空字符串或虚拟路径，例如
history.pushState({ page: 'form' }, '', '/fake/form') - 状态对象（第一个参数）会随事件一起传递，可用于区分场景
- 注意：仅修改历史栈，页面不会自动刷新或跳转
监听 popstate 事件并响应
当用户通过返回按钮、前进/后退键触发历史变化时，会触发 window.addEventListener('popstate', ...)。此时可弹出确认框、恢复表单、或跳转到指定位置。
- 示例：表单未保存时提醒用户
-
注意：该事件只对由
pushState或replaceState触发的历史变化有效，不响应初始页面加载或传统 a 标签跳转 - 可在回调中调用
history.go(1)主动前进，或history.back()再次后退（慎用，易造成死循环）
结合 beforeunload 提升体验（仅限页面卸载）
beforeunload 可在用户直接关闭标签页或跳转到其他网站时提示保存，但它 不适用于返回按钮，且现代浏览器限制其自定义文案，仅显示统一提示。
立即学习“Java免费学习笔记（深入）”；
- 适合场景：防止意外关闭未保存的编辑页
- 写法简单：
window.addEventListener('beforeunload', e => { e.preventDefault(); return ''; }) - 与
popstate是互补关系，不是替代方案
避免常见陷阱
很多开发者试图用 history.back() 在 popstate 中“取消返回”，这是无效的——它只是再触发一次返回，容易陷入循环。
- 不要在
popstate回调里无条件调用history.back()或history.forward() - 确保每次
pushState都有对应处理逻辑，否则可能丢失状态 - 单页应用（SPA）中建议统一管理路由栈，避免手动混用
pushState和location.href
