js獲取精確的滑鼠座標
阿新 • • 發佈:2019-02-13
現在很多網站分析系統均要獲取滑鼠座標跟軌跡來繪製雲圖跟滑鼠軌跡,這就 要求滑鼠座標必須要準確才行。但要準確卻有一定困難。
如上圖:
使用者開啟百度首頁,在不同的瀏覽器大小下點選“網站”字型,的座標完全不一致。座標不準確,雲圖,熱點圖何來準確?
對於普通一個網站有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>之前即可看效果