本文讲解如何在页面跳转时正确管理鼠标光标样式，避免用户点击后退按钮返回时 cursor 仍为 wait 的问题，通过监听 dom 加载完成事件实现自动恢复 default 光标。
本文讲解如何在页面跳转时正确管理鼠标光标样式，避免用户点击后退按钮返回时 cursor 仍为 wait 的问题，通过监听 dom 加载完成事件实现自动恢复 default 光标。
在 Web 开发中，为提升用户体验，常在表单提交或页面跳转前将鼠标光标设为 wait（沙漏/旋转图标），以直观提示用户“操作正在进行”。但若仅在 JS 中手动设置 cursor = 'wait' 而未在页面重新就绪时及时重置，极易导致浏览器后退（Back）时光标卡死在 wait 状态——这是因为浏览器可能从缓存中快速恢复页面（bfcache 或内存缓存），而 window.onload 或 DOMContentLoaded 并未被重新触发，原有 cursor: wait 样式便持续生效。
你当前代码中的关键问题有两个：
- defaultPointer() 函数内误写为 document.body.style.cursor = 'wait';（应为 'default'）；
- window.onload 绑定逻辑错误：它只在当前页面首次加载完成时触发，无法覆盖“返回上一页”这一场景（此时页面不重新加载，onload 不执行）。
✅ 正确解法是：在导航发起时设为 wait，并在目标页 DOM 就绪后立即恢复 default，同时确保该逻辑对所有入口（包括后退）均有效。
推荐实现如下：
// 页面开始加载时即设为 wait（例如登录按钮点击时）
function waitPointer() {
document.body.style.cursor = 'wait';
}
// 在新页面 DOM 构建完成时恢复默认光标（无需等待全部资源如图片加载）
document.addEventListener('DOMContentLoaded', function () {
document.body.style.cursor = 'default';
});
? 注意事项：
- ✅ 使用 DOMContentLoaded 而非 window.onload：前者在 HTML 解析完成、DOM 树构建完毕即触发，响应更快，且每次页面显示（含后退）都会触发（现代浏览器对 bfcache 场景也保证该事件可靠执行）；
- ❌ 避免依赖 onload 或定时器：它们无法覆盖缓存回退路径；
- ✅ 若需更精细控制（如仅在特定流程中启用 wait），可结合 sessionStorage 或 URL 参数标记状态，但本例中简单全局重置已足够；
- ? 补充建议：为防样式污染，可在 CSS 中添加兜底规则（非必需，但更健壮）：
body { cursor: default !important; }并在 JS 中用 !important 动态覆盖（需内联 style）或切换 class 控制，进一步提升可维护性。
总结：光标状态应与页面生命周期对齐，而非仅依赖 JavaScript 手动调用。通过 DOMContentLoaded 全局监听 + 简洁的样式重置，即可彻底解决后退时光标卡顿问题，保障交互一致性与专业体验。
