如何在JavaScript中捕获移动端回滑导航事件？

当然可以实现，以下是几种可靠的方案：

1. 监听浏览器 popstate 事件 #

移动端的回滑操作（包括系统物理返回键、浏览器返回按钮、iOS左滑返回）几乎都会触发浏览器的 popstate 事件。你可以直接监听这个事件，在回调中执行自定义逻辑，默认的页面导航行为会正常执行（无需调用 preventDefault()）。

示例代码：

window.addEventListener('popstate', (event) => {
  // 执行你的自定义函数
  handleBackSwipe();
  
  // 这里不需要阻止默认行为，页面会正常回退
});

function handleBackSwipe() {
  console.log('回滑导航已触发，自定义逻辑执行中');
  // 你的业务代码写在这里
}

注意：popstate 事件不仅由回滑触发，调用 history.pushState() 或 history.replaceState() 也会触发它。如果需要区分回滑动作，可以结合 event.state 参数或页面的历史记录状态做判断。

2. 针对iOS左滑手势的补充处理 #

iOS Safari的左滑返回手势在某些场景下（比如单页应用）可能不会立即触发 popstate，这时候可以结合 pageshow 事件辅助监听——页面回退完成后会触发 pageshow，你可以在这里补充执行自定义逻辑：

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // 页面从缓存中恢复，说明发生了回滑导航
    handleBackSwipe();
  }
});

关键提示 #

• 不要在事件回调中调用 event.preventDefault()，否则会直接阻止默认的回滑导航行为。
• 对于单页应用，建议结合自身路由系统的生命周期钩子（比如Vue的 beforeRouteLeave、React的 useEffect 监听路由变化）来配合处理，确保自定义逻辑和页面导航同步执行。

内容的提问来源于stack exchange，提问作者Michał B