本文介绍如何在页面跳转或加载过程中动态控制鼠标光标样式，确保用户返回上一页时光标自动恢复为默认状态，避免因未重置 cursor 样式导致的视觉异常。
本文介绍如何在页面跳转或加载过程中动态控制鼠标光标样式，确保用户返回上一页时光标自动恢复为默认状态，避免因未重置 `cursor` 样式导致的视觉异常。
在 Web 开发中，常通过设置 document.body.style.cursor = 'wait' 来提示用户当前正在执行异步操作（如登录提交、页面跳转）。但若仅在跳转前修改光标，而未在目标页加载完成或用户返回时主动还原，就会出现「返回登录页后光标仍为 wait」的常见问题——这是因为浏览器缓存了历史页面的 DOM 状态（尤其是 body.style.cursor），而 window.onload 或 DOMContentLoaded 事件在页面被缓存后可能不会重新触发。
✅ 正确做法：统一在目标页初始化时重置光标
最可靠的方式是在每个页面加载伊始就将光标设为 default，而非依赖跳转前的“配对还原”。这符合单页应用与多页应用的通用健壮性原则：
// 页面加载时立即恢复默认光标（推荐放在 <head> 中的 script 或入口 JS 文件顶部）
document.body.style.cursor = 'default';
// 若需在特定操作中临时显示等待态（如点击登录）
function showWaitCursor() {
document.body.style.cursor = 'wait';
}
function hideWaitCursor() {
document.body.style.cursor = 'default';
}
// 示例：登录按钮点击逻辑（建议配合 fetch/redirect 使用）
document.querySelector('.introLogin').addEventListener('click', function(e) {
e.preventDefault(); // 防止表单默认提交干扰
showWaitCursor();
// 模拟登录请求（实际应替换为 fetch 或 form.submit()）
setTimeout(() => {
// 假设跳转成功
window.location.href = '/dashboard';
}, 800);
});⚠️ 原代码问题分析
- defaultPointer() 函数中误将 document.body.style.cursor = 'wait' 写死，导致无法恢复；
- window.onload 绑定时机滞后，且仅在首次加载生效，不适用于浏览器前进/后退（BFCache）场景；
- 直接内联 onclick="waitPointer()" 不利于维护，也难以同步清理状态。
? 进阶建议：监听页面可见性与导航事件
为彻底规避 BFCache 导致的状态残留，可结合 pageshow 事件（会在页面从缓存恢复时触发）：
// 兼容页面从缓存恢复的情况
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
document.body.style.cursor = 'default';
}
});
// 同时保留 DOM 加载时的兜底设置
document.addEventListener('DOMContentLoaded', () => {
document.body.style.cursor = 'default';
});✅ 最终推荐结构（简洁、兼容、无副作用）
<!-- HTML 中移除内联 JS --> <div class="introLogin"> <input class="introLoginInput" type="button" value="Login"> </div>
// 全局初始化（建议置于 main.js 或页面底部）
(function initCursor() {
document.body.style.cursor = 'default';
document.addEventListener('DOMContentLoaded', () => {
document.body.style.cursor = 'default';
});
window.addEventListener('pageshow', (e) => {
if (e.persisted) document.body.style.cursor = 'default';
});
})();
// 登录交互逻辑（解耦、可测试）
document.querySelector('.introLoginInput').addEventListener('click', function() {
document.body.style.cursor = 'wait';
// 执行登录逻辑...
});这样既保证每次页面可见时光标均为 default，又支持按需临时切换，彻底解决返回时光标卡死问题。
