判斷用戶的在線狀態(tài) onbeforeunload事件
更新時(shí)間：2011年03月05日 11:51:50 作者：
window.event.clientX和window.event.clientY 將捕捉當(dāng)前事件發(fā)生時(shí)鼠標(biāo)相對(duì)與窗口的桌面坐標(biāo)，通常情況下IE的關(guān)閉按鈕都會(huì)在頁(yè)面的右上部分，所以點(diǎn)關(guān)閉的時(shí)候鼠標(biāo)的坐標(biāo)的Y坐標(biāo)一定是小于0的
獲得用戶登陸狀態(tài)不用說了，判斷離開的話就有一點(diǎn)問題了，如果說用戶都是按照設(shè)計(jì)者的規(guī)定觸發(fā)退出事件離開的話那就沒什么難度了，但是用戶的離開方式多種多樣，怎么在用戶非法離開的時(shí)候即時(shí)的判斷離開呢？最常見的非法離開就是關(guān)閉瀏覽器了。
<BODY onbeforeunload="body_onUnload()">
<script>
window.onbeforeunload = function() {
if (window.event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
alert("瀏覽器關(guān)閉");
}
else
{
alert("刷新或者跳轉(zhuǎn)到其他頁(yè)");
}
}
</script>
</BODY>
以上是一個(gè)片段，BODY 的 UNLOAD和onbeforeunload事件會(huì)在瀏覽器清除所加載的信息時(shí)被觸發(fā)，也就是說頁(yè)面在回送、重定向或被關(guān)閉的時(shí)候就會(huì)觸發(fā) ，通過這個(gè)事件加上JAVASCRIPT處理就可以實(shí)現(xiàn)非法關(guān)閉瀏覽器也即時(shí)統(tǒng)計(jì)在線人數(shù)了。
但是有個(gè)問題，怎么判斷用戶是關(guān)閉還是刷新、回送、重定向呢？
window.event.clientX和window.event.clientY 將捕捉當(dāng)前事件發(fā)生時(shí)鼠標(biāo)相對(duì)與窗口的桌面坐標(biāo)，通常情況下IE的關(guān)閉按鈕都會(huì)在頁(yè)面的右上部分，所以點(diǎn)關(guān)閉的時(shí)候鼠標(biāo)的坐標(biāo)的Y坐標(biāo)一定是小于0的，另外，鼠標(biāo)坐標(biāo)的X方向上坐標(biāo)數(shù)值會(huì)大于窗體寬度，所以，從這兩個(gè)條件就可以判斷鼠標(biāo)是不是在點(diǎn)關(guān)閉按鈕引發(fā)的onbeforeload事件。
還有一種關(guān)閉方法是ALT+F4 ，通過event.altKey就可以判斷，事件發(fā)生的時(shí)候ALT鍵是不是被按下了，這樣也就判斷出了是不是時(shí)候ALT+F4來關(guān)閉窗口。
不過也出現(xiàn)一個(gè)問題，當(dāng)使用一些特殊的左面主題的時(shí)候 關(guān)閉按鈕可觸發(fā)的坐標(biāo)數(shù)值不一定小于窗體寬度，所以，上面例子中的window.event.clientX>document.body.clientWidth這個(gè)條件可以不要.
復(fù)制代碼 代碼如下:
<BODY onbeforeunload="body_onUnload()">
<script>
window.onbeforeunload = function() {
if (window.event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
alert("瀏覽器關(guān)閉");
}
else
{
alert("刷新或者跳轉(zhuǎn)到其他頁(yè)");
}
}
</script>
</BODY>
以上是一個(gè)片段，BODY 的 UNLOAD和onbeforeunload事件會(huì)在瀏覽器清除所加載的信息時(shí)被觸發(fā)，也就是說頁(yè)面在回送、重定向或被關(guān)閉的時(shí)候就會(huì)觸發(fā) ，通過這個(gè)事件加上JAVASCRIPT處理就可以實(shí)現(xiàn)非法關(guān)閉瀏覽器也即時(shí)統(tǒng)計(jì)在線人數(shù)了。
但是有個(gè)問題，怎么判斷用戶是關(guān)閉還是刷新、回送、重定向呢？
window.event.clientX和window.event.clientY 將捕捉當(dāng)前事件發(fā)生時(shí)鼠標(biāo)相對(duì)與窗口的桌面坐標(biāo)，通常情況下IE的關(guān)閉按鈕都會(huì)在頁(yè)面的右上部分，所以點(diǎn)關(guān)閉的時(shí)候鼠標(biāo)的坐標(biāo)的Y坐標(biāo)一定是小于0的，另外，鼠標(biāo)坐標(biāo)的X方向上坐標(biāo)數(shù)值會(huì)大于窗體寬度，所以，從這兩個(gè)條件就可以判斷鼠標(biāo)是不是在點(diǎn)關(guān)閉按鈕引發(fā)的onbeforeload事件。
還有一種關(guān)閉方法是ALT+F4 ，通過event.altKey就可以判斷，事件發(fā)生的時(shí)候ALT鍵是不是被按下了，這樣也就判斷出了是不是時(shí)候ALT+F4來關(guān)閉窗口。
不過也出現(xiàn)一個(gè)問題，當(dāng)使用一些特殊的左面主題的時(shí)候 關(guān)閉按鈕可觸發(fā)的坐標(biāo)數(shù)值不一定小于窗體寬度，所以，上面例子中的window.event.clientX>document.body.clientWidth這個(gè)條件可以不要.
相關(guān)文章
用js寫“算24”游戲的思路分析與實(shí)現(xiàn)代碼
“算24”是一種游戲，小時(shí)候玩過，就是一副撲克，把大王，小王除掉，A算1點(diǎn)J,Q，K都算10點(diǎn)。任意抽4個(gè)牌，可以運(yùn)用+-*/()來進(jìn)行運(yùn)算，把最后結(jié)果等于24。2008-05-05
主要的區(qū)別是有返回值，一般sub是用來調(diào)用大量的內(nèi)容的時(shí)候用sub，對(duì)于需要計(jì)算并需要返回值的時(shí)候用function，多用function定義函數(shù)。2011-01-01
拿捏javascript對(duì)象增刪改查應(yīng)用及示例
“撩過”c++的對(duì)象，“拿捏”了python的對(duì)象，那么今天我們看看javascript中的對(duì)象到底是什么，看能不能一次性拿下，不行的話就多來幾次，想做“海王”就多物色幾門語(yǔ)言的對(duì)象，多new幾個(gè)，最終你會(huì)發(fā)現(xiàn)都差不多2022-03-03
Echarts地圖實(shí)例詳解(地圖樣式、合并地圖、增加地圖)
ECharts是一個(gè)使用JavaScript實(shí)現(xiàn)的開源可視化庫(kù),涵蓋各行業(yè)圖表,滿足各種需求,下面這篇文章主要給大家介紹了關(guān)于Echarts地圖的相關(guān)資料,包括地圖樣式、合并地圖、增加地圖,需要的朋友可以參考下2022-06-06
Makefile/cmake/node-gyp中區(qū)分判斷不同平臺(tái)的方法
今天小編就為大家分享一篇關(guān)于Makefile/cmake/node-gyp中區(qū)分判斷不同平臺(tái)的方法，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2018-12-12
javascript獲取wx.config內(nèi)部字段解決微信分享
這篇文章主要介紹了javascript獲取wx.config內(nèi)部字段解決微信分享,需要的朋友可以參考下2016-03-03
圖片輪播組件是一個(gè)在網(wǎng)頁(yè)中很常見的技術(shù)，這篇文章主要為大家詳細(xì)介紹了Bootstrap圖片輪播組件使用實(shí)例，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了微信jsdk錄音功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
for循環(huán) + setTimeout 結(jié)合一些示例(前端面試題）
最近在學(xué)習(xí)node.js開發(fā)資料，正好碰到了for循環(huán)+settimeout的經(jīng)典例子，下面小編給大家分享for循環(huán) + setTimeout 結(jié)合一些示例代碼，需要的朋友參考下吧2017-08-08
有的時(shí)候我們希望對(duì)類成員(屬性,方法)進(jìn)行一定的訪問控制,來保證數(shù)據(jù)的安全,通過類修飾符可以做到這一點(diǎn),目前typescript提供了四種修飾符,這篇文章主要給大家介紹了關(guān)于TypeScript只讀修飾符的相關(guān)資料,需要的朋友可以參考下2022-04-04