页面跳转后自动恢复默认光标样式的方法

本文详解页面跳转后光标仍卡在等待状态的解决方案，分析因 JavaScript 设置 cursor: wait 后未及时重置导致的 bfcache 光标残留问题，并提供基于 DOMContentLoaded 事件的可靠修复方法。

光标卡在“等待”状态无法恢复，虽然看似小问题，但实际体验非常糟糕——用户点击按钮后页面跳转，新页面理应显示默认光标样式，却始终处于转圈状态，尤其是在浏览器后退导航时，显得极不专业。那么，光标卡住的根本原因是什么？如何干净利落地解决页面跳转后光标恢复问题？本文将详细拆解。

在 Web 开发中，为了向用户提供操作反馈，开发者常会在异步操作（如登录提交、页面跳转前）将 document.body.style.cursor 临时设置为 'wait'。初衷良好，但若仅在跳转前设置 wait，而未在目标页面加载完成或返回时主动重置光标样式，问题便会出现——浏览器后退时，原来的 cursor: wait 样式很可能被 bfcache（页面缓存）机制继承或残留，导致光标持续旋转，无法恢复默认。

根本原因其实并不复杂：window.onload 或 document.ready 事件仅会在当前页面首次加载完成时触发一次。而浏览器后退操作通常直接从缓存（bfcache）中恢复页面，此时 onload 不再执行，光标重置逻辑自然失效，导致光标残留问题。

✅ 正确的解决方案非常直接：页面加载开始时统一设置 wait 光标，待 DOM 结构解析完成后立即切换回 default。切勿依赖 onload 事件，因为它需要等待所有资源（图片、脚本等）加载完毕才触发，延迟高且不可靠。使用 DOMContentLoaded 事件才是更可靠的做法：

// 页面加载初期即启用等待光标
document.body.style.cursor = 'wait';

// DOM 解析完成即恢复默认光标（比 onload 更早、更可靠）
document.addEventListener('DOMContentLoaded', () => {
  document.body.style.cursor = 'default';
});

⚠️ 几个容易踩的坑：

• 不要在 onclick 事件中仅设置 wait 而不配套还原逻辑——例如原代码中的 defaultPointer() 函数根本未被调用。
• 原问题中 defaultPointer() 内部错误地将 cursor 设置为 'wait'（正确应为 'default'），这是典型的笔误，需要特别注意。
• 不要依赖 window.onunload 或 beforeunload 来清理光标，现代浏览器对这两个事件有诸多限制，极不可靠。
• 对于 SPA 应用（如 React/Vue），应在路由离开前主动重置光标，或封装成可复用的 loading 状态管理逻辑，避免光标残留。

更进一步，为了更健壮的光标管理，可以封装成可复用函数，支持嵌套调用和自动清理：

const cursor = {
  wait: () => document.body.style.cursor = 'wait',
  reset: () => document.body.style.cursor = 'default'
};

// 全局初始化
cursor.wait();
document.addEventListener('DOMContentLoaded', cursor.reset);

这样既能保证首屏加载时的反馈一致性，又能彻底规避历史导航导致的光标残留问题。以后遇到类似场景，直接复用即可，省心高效。