現在很多網站分析系統均要獲取鼠標坐標跟軌跡來繪制雲圖跟鼠標軌跡，這就 要求鼠標坐標必須要準確才行。但要準確卻有一定困難。
如上圖：
用戶打開百度首頁，在不同的瀏覽器大小下點擊“網站”字體，的坐標完全不一致。坐標不準確，雲圖，熱點圖何來準確？
對於普通一個網站有3個不確定性：
1. 是否固定寬度
2. 是否靠左，靠右，居中
3. 是否自適應大小
這3個不確定性由於無法通過js獲取，所以必須通過網站告知js此三個參數具體值。
目標：不管瀏覽器窗口大小如何，對應鼠標的點擊坐標均與瀏覽器最大化時對應的坐標值完全一致。
坐標偏移一般不考慮Y軸坐標，所以代碼隻針對於X軸的考慮
Js代碼
<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>之前即可看效果