js获取精确的鼠标坐标

 

现在很多网站分析系统均要获取鼠标坐标跟轨迹来绘制云图跟鼠标轨迹，这就 要求鼠标坐标必须要准确才行。但要准确却有一定困难。

如上图：

用户打开百度首页，在不同的浏览器大小下点击“网站”字体，的坐标完全不一致。坐标不准确，云图，热点图何来准确？

对于普通一个网站有3个不确定性：

1.       是否固定宽度

2.       是否靠左，靠右，居中

3.       是否自适应大小

 

这3个不确定性由于无法通过js获取，所以必须通过网站告知js此三个参数具体值。

目标：不管浏览器窗口大小如何，对应鼠标的点击坐标均与浏览器最大化时对应的坐标值完全一致。

 

坐标偏移一般不考虑Y轴坐标，所以代码只针对于X轴的考虑

<script language="javascript" type="text/javascript">
 var width =800;  //固定宽度
 var align "center"; //靠左，居中，靠右
 var auto =false;  //自适应大小
 
  
 function getMousePoint(event) {
         var px, py;
         var bodyWidth  =getDocWidth();
         var screenHeight =window.screen.height;           //屏幕分辨率的高
         var screenWidth =window.screen.width;            //屏幕分辨率的宽
         
         
        //ie的兼容性，为了用于onmousemove事件
        if(!event) {
            event = window.event;
        }
        if(document.all) { // is ie
            px = event.clientX;
            py = event.clientY;
            px += document.documentElement.scrollLeft;
            py += document.documentElement.scrollTop;
        } else {
            px = event.pageX;
            py = event.pageY;
        }
        var maxScreenX = 0 ;
        var nowScreenX = 0 ;
        if(align == "right") {
            nowScreenX = bodyWidth - width ;
            maxScreenX = screenWidth - width ;
        }
        else if(align == "left") {
            nowScreenX = 0 ;
            maxScreenX = 0 ;
        }
        else { //default : center
            nowScreenX = (bodyWidth - width)/2 ;
            maxScreenX = (screenWidth - width) /2 ;
        }
        //必须非自适应
        if(!auto && maxScreenX != nowScreenX){
            px = px - Math.abs(nowScreenX) + maxScreenX;
        }
        alert(px+"___" + py);
        return { x: px, y: py };
    }
  
  
 function getDocWidth(){return(document.documentElement
   &&document.documentElement.scrollWidth)
   ||(document.body&&document.body.scrollWidth)||0}
//测试代码，纯粹用于测试
document.body.onclick = function(event) {
     
    var pos = getMousePoint(event);
    var xPos = pos.x;
    var yPos = pos.y;
 }</script>

 稍微优化后实际上只要2个参数即可。

如width=0的时候，就说明自适应？呵

 

对于自适应大小的网站（如用table标签，width=100%）这种，没必要做换算，因为无法获取精确值

此鼠标获取的方法适用于主流网站系统，如163,qq,cntv,sina,baidu，不去考虑其他界面设计得很别扭网站

将上述代码直接复制到html的</body>之前即可看效果