亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開(kāi)發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

【W(wǎng)EB開(kāi)發(fā)】前端如何判斷用戶是否離開(kāi)了當(dāng)前頁(yè)面?

admin
2025年7月3日 8:5 本文熱度 88

有幾種方法可以檢測(cè)用戶是否離開(kāi)了當(dāng)前頁(yè)面:

1. visibilitychange 事件

document.addEventListener('visibilitychange'function() {  if (document.visibilityState === 'hidden') {    console.log('用戶離開(kāi)了頁(yè)面');  } else {    console.log('用戶回到了頁(yè)面');  }});
優(yōu)點(diǎn):標(biāo)準(zhǔn)、可靠:W3C 標(biāo)準(zhǔn),所有現(xiàn)代瀏覽器都支持。

性能友好:專門為此設(shè)計(jì),能有效節(jié)省 CPU 和電池資源。

邏輯清晰:直接反映頁(yè)面的“可見(jiàn)”狀態(tài)。

缺點(diǎn):它無(wú)法判斷用戶是否正在關(guān)閉頁(yè)面。當(dāng)用戶關(guān)閉標(biāo)簽頁(yè)時(shí),visibilitychange 事件可能會(huì)觸發(fā)(變?yōu)?hidden),但我們無(wú)法區(qū)分這是切換還是關(guān)閉。

2pagehide  事件  

 window.addEventListener('pagehide'function() {  console.log('用戶正在離開(kāi)頁(yè)面');  if (e.persisted) {    console.log('頁(yè)面正在進(jìn)入 bfcache');  } else {    console.log('頁(yè)面正在被正常卸載');  }  });

pagehide 比 unload 更可靠,特別是在移動(dòng)設(shè)備上。

3unload 事件

window.addEventListener('beforeunload'function(e) {  // 可以在這里顯示確認(rèn)對(duì)話框  e.preventDefault();  e.returnValue = '';  console.log('用戶嘗試離開(kāi)頁(yè)面');});

重大缺陷:

unload 事件非常不可靠。瀏覽器在處理頁(yè)面卸載時(shí),并不會(huì)等待 unload 事件處理器中的異步操作(如 fetch 或 XMLHttpRequest)完成。這個(gè)請(qǐng)求很可能在發(fā)送完成之前就被瀏覽器終止了。

4. beforeunload 事件

window.addEventListener('beforeunload'function(e) {  // 可以在這里顯示確認(rèn)對(duì)話框  e.preventDefault();  e.returnValue = '';  console.log('用戶嘗試離開(kāi)頁(yè)面');  e.returnValue ='您有未保存的更改,確定要離開(kāi)嗎?‘;});

5. 監(jiān)聽(tīng)鼠標(biāo)離開(kāi)窗口

document.addEventListener('mouseout'function(e) {  if (!e.relatedTarget && e.clientY <= 0) {    console.log('鼠標(biāo)離開(kāi)了窗口');  }});

注意事項(xiàng)

  • beforeunload 和 unload 事件在某些移動(dòng)瀏覽器中可能不可靠

  • 現(xiàn)代瀏覽器限制了這些事件的使用,以防止濫用(如強(qiáng)制用戶留在頁(yè)面上)

  • 對(duì)于單頁(yè)應(yīng)用(SPA),路由變化不會(huì)觸發(fā)這些事件,需要使用路由守衛(wèi)


選擇哪種方法取決于你的具體需求,visibilitychange 通常是推薦的方法,因?yàn)樗軠?zhǔn)確反映頁(yè)面是否對(duì)用戶可見(jiàn)。


閱讀原文:原文鏈接


該文章在 2025/7/3 14:24:08 編輯過(guò)
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved