本文实例讲述了JS获取鼠标位置距浏览器窗口距离的方法。分享给大家供大家参考,具体如下:
先来看看运行效果图:

代码如下:
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
<style type="text/css">
#test_div {
 width:400px;
 height: 400px;
 background-color: red;
}
</style>
 </head>
 <body>
 <div id="test_div"></div>
 </body>
<script type="text/javascript">
 function mousePos(e){
 e=e||window.event;
 var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;//分别兼容ie和chrome
 var scrollY=document.documentElement.scrollTop||document.body.scrollTop;
 var x=e.pageX||(e.clientX+scrollX);//兼容火狐和其他浏览器
 var y=e.pageY||(e.clientY+scrollY);
 console.log(x,y);
 return {x:x,y:y};
 }
 var test=document.querySelector("#test_div");
 test.onclick=function(e){
 mousePos(e);
 }
</script>
</html>
其中的document.documentElement.scrollLeft和document.body.scrollLeft分别是ie和chrome的方法,而火狐中的pageX可以直接获取滑动的距离。
PS:这里再为大家提供两款在线参考表工具供大家开发过程中参考使用:
javascript事件与功能说明大全: http://tools.jb51.net/table/javascript_event
键盘与鼠标按键的键值对照表: http://tools.jb51.net/table/key_codes_num