判斷用戶的在線狀態(tài) onbeforeunload事件
更新時間：2011年03月05日 11:51:50 作者：
window.event.clientX和window.event.clientY 將捕捉當前事件發(fā)生時鼠標相對與窗口的桌面坐標，通常情況下IE的關(guān)閉按鈕都會在頁面的右上部分，所以點關(guān)閉的時候鼠標的坐標的Y坐標一定是小于0的
獲得用戶登陸狀態(tài)不用說了，判斷離開的話就有一點問題了，如果說用戶都是按照設計者的規(guī)定觸發(fā)退出事件離開的話那就沒什么難度了，但是用戶的離開方式多種多樣，怎么在用戶非法離開的時候即時的判斷離開呢？最常見的非法離開就是關(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)到其他頁");
}
}
</script>
</BODY>
以上是一個片段，BODY 的 UNLOAD和onbeforeunload事件會在瀏覽器清除所加載的信息時被觸發(fā)，也就是說頁面在回送、重定向或被關(guān)閉的時候就會觸發(fā) ，通過這個事件加上JAVASCRIPT處理就可以實現(xiàn)非法關(guān)閉瀏覽器也即時統(tǒng)計在線人數(shù)了。
但是有個問題，怎么判斷用戶是關(guān)閉還是刷新、回送、重定向呢？
window.event.clientX和window.event.clientY 將捕捉當前事件發(fā)生時鼠標相對與窗口的桌面坐標，通常情況下IE的關(guān)閉按鈕都會在頁面的右上部分，所以點關(guān)閉的時候鼠標的坐標的Y坐標一定是小于0的，另外，鼠標坐標的X方向上坐標數(shù)值會大于窗體寬度，所以，從這兩個條件就可以判斷鼠標是不是在點關(guān)閉按鈕引發(fā)的onbeforeload事件。
還有一種關(guān)閉方法是ALT+F4 ，通過event.altKey就可以判斷，事件發(fā)生的時候ALT鍵是不是被按下了，這樣也就判斷出了是不是時候ALT+F4來關(guān)閉窗口。
不過也出現(xiàn)一個問題，當使用一些特殊的左面主題的時候 關(guān)閉按鈕可觸發(fā)的坐標數(shù)值不一定小于窗體寬度，所以，上面例子中的window.event.clientX>document.body.clientWidth這個條件可以不要.
復制代碼 代碼如下:
<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)到其他頁");
}
}
</script>
</BODY>
以上是一個片段，BODY 的 UNLOAD和onbeforeunload事件會在瀏覽器清除所加載的信息時被觸發(fā)，也就是說頁面在回送、重定向或被關(guān)閉的時候就會觸發(fā) ，通過這個事件加上JAVASCRIPT處理就可以實現(xiàn)非法關(guān)閉瀏覽器也即時統(tǒng)計在線人數(shù)了。
但是有個問題，怎么判斷用戶是關(guān)閉還是刷新、回送、重定向呢？
window.event.clientX和window.event.clientY 將捕捉當前事件發(fā)生時鼠標相對與窗口的桌面坐標，通常情況下IE的關(guān)閉按鈕都會在頁面的右上部分，所以點關(guān)閉的時候鼠標的坐標的Y坐標一定是小于0的，另外，鼠標坐標的X方向上坐標數(shù)值會大于窗體寬度，所以，從這兩個條件就可以判斷鼠標是不是在點關(guān)閉按鈕引發(fā)的onbeforeload事件。
還有一種關(guān)閉方法是ALT+F4 ，通過event.altKey就可以判斷，事件發(fā)生的時候ALT鍵是不是被按下了，這樣也就判斷出了是不是時候ALT+F4來關(guān)閉窗口。
不過也出現(xiàn)一個問題，當使用一些特殊的左面主題的時候 關(guān)閉按鈕可觸發(fā)的坐標數(shù)值不一定小于窗體寬度，所以，上面例子中的window.event.clientX>document.body.clientWidth這個條件可以不要.
相關(guān)文章
這篇文章主要為大家詳細介紹了微信小程序定位當前城市的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
IE6/7中g(shù)etAttribute獲取href/src 屬性(相對路徑0值與其它瀏覽器不同
IE6/7中g(shù)etAttribute獲取href/src 屬性(相對路徑0值與其它瀏覽器不同的解決方法2011-08-08
javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(二)人物行走的實現(xiàn)
上一講我們談到了如何讓靜態(tài)人物變?yōu)閯討B(tài)，今天我們來談談如何使人物移動，感興趣的朋友可以了解下哦，順便鞏固一下animate方法的應用，希望本文對你有所幫助2013-01-01
基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動端)
這篇文章主要介紹了基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動端)的相關(guān)資料,需要的朋友可以參考下2016-04-04
解析javascript系統(tǒng)錯誤：-1072896658的解決辦法
問題出現(xiàn)在用到ajax的場合。昨天還正常的程序，今天運行就有javascript系統(tǒng)錯誤：-1072896658的2013-07-07
這篇文章主要介紹了詳解JavaScript之Array.reduce源碼解讀，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要為大家詳細介紹了原生js實現(xiàn)彈跳小球，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Dropzone.js實現(xiàn)文件拖拽上傳功能(附源碼下載)
dropzone.js是重量輕的JavaScript庫，將HTML元素設置為一個降落區(qū),并通過Ajax文件被上傳到服務器。本文給大家詳細介紹Dropzone.js實現(xiàn)文件拖拽上傳功能，需要的朋友參考下吧2016-11-11
wufengteam?core統(tǒng)一中心注冊器功能解析
這篇文章主要為大家介紹了wufengteam?core統(tǒng)一中心注冊器功能解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
JavaScript實現(xiàn)合并(歸并)排序算法示例解析
這篇文章主要為大家介紹了JavaScript實現(xiàn)合并(歸并)排序算法示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08