HTML5小游戏移动端需分场景拦截退出：Android用popstate+pushState模拟返回栈并弹自定义模态框；iOS手势无法拦截，应预留安全区并引导自动存档续玩；onbeforeunload仅对刷新有效且文案受限。
HTML5小游戏在移动端容易因误触浏览器返回键、系统返回手势或页面刷新按钮而意外退出，这不是代码 bug，而是交互边界没被主动控制——浏览器本身不提供「游戏模式」，必须靠开发者手动拦截关键事件并引导用户确认。
监听 window.onbeforeunload 仅对刷新/关闭标签页有效
这个事件能拦截用户主动刷新、关闭标签页或输入新 URL 的行为，但对 Android 返回键、iOS 底部返回手势、PWA 离线后点击系统返回等完全无效。它只在「页面即将卸载」时触发，且现代浏览器（Chrome 80+、Safari 14.5+）已限制其弹窗文案，只能显示默认提示语，不能自定义内容。
- 仅适用于桌面端或部分 PWA 场景下的刷新防护
- 移动端返回键触发时，
onbeforeunload不会执行 - 若返回值为
falsy（如return false），现代浏览器直接忽略；需返回任意非空字符串（如return "游戏未保存，确定要离开？"），但实际显示文案由浏览器决定
Android 返回键拦截必须用 popstate + history.pushState
移动端 WebView 或 Chrome for Android 中，物理返回键默认触发 history.back()。想拦截它，得先让页面历史栈“变厚”：在游戏启动时调用一次 history.pushState，再监听 popstate 事件，在回调里阻止默认跳转，并弹出确认框。
- 首次进入游戏时执行：
history.pushState({ game: true }, "") - 监听：
window.addEventListener("popstate", handleBack) -
handleBack中调用event.preventDefault()无效，真正起作用的是在回调里再次pushState并弹窗；否则第二次按返回键仍会退到上一页 - 注意：PWA 安装后运行在 standalone 模式下，返回键可能直接退出应用，此时该方法失效，需配合
beforeinstallprompt提示用户添加到主屏幕并说明操作习惯
用 confirm() 弹窗风险高，推荐自定义 DOM 模态框
直接在 立即学习“前端免费学习笔记（深入）”； iOS Safari 的底部上滑返回手势无法通过 JS 拦截（Apple 明确禁止）， 真正的难点不在代码量，而在不同平台对「返回」行为的定义根本不一致：Android 返回键是导航栈操作，iOS 手势是视图切换，桌面刷新是资源重载。没有银弹，只有分场景兜底——别指望一个 popstate 回调里调用 confirm("退出游戏？") 会导致 UI 卡顿、动画中断，且部分 Android 浏览器（如 Samsung Internet）会静默吞掉该弹窗。更可靠的做法是用绝对定位的
alert() / confirm()：它们阻塞 JS 主线程，游戏音频/动画可能卡死pointer-events: none 在遮罩层，pointer-events: auto 在按钮上，防止穿透点击history.pushState 恢复栈顶状态，再显示模态框；用户点「取消」就什么也不做，点「退出」再调用 history.back()
ESC 键和点击遮罩层关闭模态框，否则用户无法逃逸iOS 底部返回手势无标准 API，只能降级处理
popstate 事件会在手势完成瞬间才触发，此时页面已开始退场动画。唯一可行策略是提前降低用户触发概率：
配合 env(safe-area-inset-bottom) 预留空间，避免按钮紧贴底部height: calc(100vh + env(safe-area-inset-bottom)) 并加 padding，制造“不可返回”的视觉暗示localStorage，页面重载后检测并恢复最后位置addEventListener 能管住所有退出路径。
