判断用户的在线状态 onbeforeunload事件
更新时间：2011年03月05日 11:51:50 作者：
window.event.clientX和window.event.clientY 将捕捉当前事件发生时鼠标相对与窗口的桌面坐标，通常情况下IE的关闭按钮都会在页面的右上部分，所以点关闭的时候鼠标的坐标的Y坐标一定是小于0的
获得用户登陆状态不用说了，判断离开的话就有一点问题了，如果说用户都是按照设计者的规定触发退出事件离开的话那就没什么难度了，但是用户的离开方式多种多样，怎么在用户非法离开的时候即时的判断离开呢？最常见的非法离开就是关闭浏览器了。
<BODY onbeforeunload="body_onUnload()">
<script>
window.onbeforeunload = function() {
if (window.event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
alert("浏览器关闭");
}
else
{
alert("刷新或者跳转到其他页");
}
}
</script>
</BODY>
以上是一个片段，BODY 的 UNLOAD和onbeforeunload事件会在浏览器清除所加载的信息时被触发，也就是说页面在回送、重定向或被关闭的时候就会触发 ，通过这个事件加上JAVASCRIPT处理就可以实现非法关闭浏览器也即时统计在线人数了。
但是有个问题，怎么判断用户是关闭还是刷新、回送、重定向呢？
window.event.clientX和window.event.clientY 将捕捉当前事件发生时鼠标相对与窗口的桌面坐标，通常情况下IE的关闭按钮都会在页面的右上部分，所以点关闭的时候鼠标的坐标的Y坐标一定是小于0的，另外，鼠标坐标的X方向上坐标数值会大于窗体宽度，所以，从这两个条件就可以判断鼠标是不是在点关闭按钮引发的onbeforeload事件。
还有一种关闭方法是ALT+F4 ，通过event.altKey就可以判断，事件发生的时候ALT键是不是被按下了，这样也就判断出了是不是时候ALT+F4来关闭窗口。
不过也出现一个问题，当使用一些特殊的左面主题的时候 关闭按钮可触发的坐标数值不一定小于窗体宽度，所以，上面例子中的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("浏览器关闭");
}
else
{
alert("刷新或者跳转到其他页");
}
}
</script>
</BODY>
以上是一个片段，BODY 的 UNLOAD和onbeforeunload事件会在浏览器清除所加载的信息时被触发，也就是说页面在回送、重定向或被关闭的时候就会触发 ，通过这个事件加上JAVASCRIPT处理就可以实现非法关闭浏览器也即时统计在线人数了。
但是有个问题，怎么判断用户是关闭还是刷新、回送、重定向呢？
window.event.clientX和window.event.clientY 将捕捉当前事件发生时鼠标相对与窗口的桌面坐标，通常情况下IE的关闭按钮都会在页面的右上部分，所以点关闭的时候鼠标的坐标的Y坐标一定是小于0的，另外，鼠标坐标的X方向上坐标数值会大于窗体宽度，所以，从这两个条件就可以判断鼠标是不是在点关闭按钮引发的onbeforeload事件。
还有一种关闭方法是ALT+F4 ，通过event.altKey就可以判断，事件发生的时候ALT键是不是被按下了，这样也就判断出了是不是时候ALT+F4来关闭窗口。
不过也出现一个问题，当使用一些特殊的左面主题的时候 关闭按钮可触发的坐标数值不一定小于窗体宽度，所以，上面例子中的window.event.clientX>document.body.clientWidth这个条件可以不要.
相关文章
“算24”是一种游戏，小时候玩过，就是一副扑克，把大王，小王除掉，A算1点J,Q，K都算10点。任意抽4个牌，可以运用+-*/()来进行运算，把最后结果等于24。2008-05-05
主要的区别是有返回值，一般sub是用来调用大量的内容的时候用sub，对于需要计算并需要返回值的时候用function，多用function定义函数。2011-01-01
“撩过”c++的对象，“拿捏”了python的对象，那么今天我们看看javascript中的对象到底是什么，看能不能一次性拿下，不行的话就多来几次，想做“海王”就多物色几门语言的对象，多new几个，最终你会发现都差不多2022-03-03
ECharts是一个使用JavaScript实现的开源可视化库,涵盖各行业图表,满足各种需求,下面这篇文章主要给大家介绍了关于Echarts地图的相关资料,包括地图样式、合并地图、增加地图,需要的朋友可以参考下2022-06-06
Makefile/cmake/node-gyp中区分判断不同平台的方法
今天小编就为大家分享一篇关于Makefile/cmake/node-gyp中区分判断不同平台的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-12-12
javascript获取wx.config内部字段解决微信分享
这篇文章主要介绍了javascript获取wx.config内部字段解决微信分享,需要的朋友可以参考下2016-03-03
图片轮播组件是一个在网页中很常见的技术，这篇文章主要为大家详细介绍了Bootstrap图片轮播组件使用实例，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了微信jsdk录音功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
for循环 + setTimeout 结合一些示例(前端面试题）
最近在学习node.js开发资料，正好碰到了for循环+settimeout的经典例子，下面小编给大家分享for循环 + setTimeout 结合一些示例代码，需要的朋友参考下吧2017-08-08
有的时候我们希望对类成员(属性,方法)进行一定的访问控制,来保证数据的安全,通过类修饰符可以做到这一点,目前typescript提供了四种修饰符,这篇文章主要给大家介绍了关于TypeScript只读修饰符的相关资料,需要的朋友可以参考下2022-04-04
最新评论