有幾種方法可以檢測用戶是否離開了當前頁面：
1. visibilitychange 事件
document.addEventListener('visibilitychange', function() { if (document.visibilityState === 'hidden') { console.log('用戶離開了頁面'); } else { console.log('用戶回到了頁面'); }});
優點：標準、可靠：W3C 標準，所有現代瀏覽器都支持。
性能友好：專門為此設計，能有效節省 CPU 和電池資源。
邏輯清晰：直接反映頁面的“可見”狀態。
缺點：它無法判斷用戶是否正在關閉頁面。當用戶關閉標簽頁時，visibilitychange 事件可能會觸發（變為 hidden），但我們無法區分這是切換還是關閉。
2. pagehide 事件
window.addEventListener('pagehide', function() { console.log('用戶正在離開頁面'); if (e.persisted) { console.log('頁面正在進入 bfcache'); } else { console.log('頁面正在被正常卸載'); } });
pagehide 比 unload 更可靠，特別是在移動設備上。
3. unload 事件
window.addEventListener('beforeunload', function(e) { e.preventDefault(); e.returnValue = ''; console.log('用戶嘗試離開頁面');});
重大缺陷：
unload 事件非常不可靠。瀏覽器在處理頁面卸載時，并不會等待 unload 事件處理器中的異步操作（如 fetch 或 XMLHttpRequest）完成。這個請求很可能在發送完成之前就被瀏覽器終止了。
4. beforeunload 事件
window.addEventListener('beforeunload', function(e) { // 可以在這里顯示確認對話框 e.preventDefault(); e.returnValue = ''; console.log('用戶嘗試離開頁面'); e.returnValue ='您有未保存的更改，確定要離開嗎?‘;});
5. 監聽鼠標離開窗口
document.addEventListener('mouseout', function(e) { if (!e.relatedTarget && e.clientY <= 0) { console.log('鼠標離開了窗口'); }});
注意事項
beforeunload 和 unload 事件在某些移動瀏覽器中可能不可靠
現代瀏覽器限制了這些事件的使用，以防止濫用（如強制用戶留在頁面上）
對于單頁應用(SPA)，路由變化不會觸發這些事件，需要使用路由守衛
選擇哪種方法取決于你的具體需求，visibilitychange 通常是推薦的方法，因為它能準確反映頁面是否對用戶可見。
閱讀原文：原文鏈接
該文章在 2025/7/3 14:24:08 編輯過
400 186 1886
