JS獲取鼠標位置，兼容IE FF

由于Firefox和IE等瀏覽器之間對js解釋的方式不一樣，firefox下面獲取鼠標位置不能夠直接使用clientX來獲取。網上說的一般都是觸發mousemove事件才行。我這里有兩段代碼，思路都一樣，就是風格不同。

第一段代碼是利用全局變量來獲取實時鼠標的位置。

var?xPos;

var?yPos;

window.document.onmousemove(function(evt){

?????evt=evt || window.event;

????if(evt.pageX){

?????????xPos=evt.pageX;

?????????yPos=evt.pageY;

?????}?else?{

?????????xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft;

?????????yPos=evt.clientY+document.body.scrollTop-document.body.clientTop;

?????}

});

因為IE和Firefox對clientX的解析不一樣，IE認為clientX是鼠標相對整個頁面左上角的位置，而Firefox認為是相對當前所見頁面左上角的位置。而這段代碼最終返回的結果是整個頁面左上角的位置。這段代碼的缺陷是，xPos和yPos是實時變動的。

第二段代碼是通過函數獲取當前時刻的鼠標坐標值

document.onmousemove = mouseMove;??

function?mouseMove(ev){??

?????ev????????????= ev || window.event;??

????var?mousePos = mouseCoords(ev);??

}??

function?mouseCoords(ev){??

????if(ev.pageX || ev.pageY){??

????????return?{x:ev.pageX, y:ev.pageY};??

?????}??

????return?{??

?????????x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,??

?????????y:ev.clientY + document.body.scrollTop???- document.body.clientTop??

?????};??

}??

這個函數和剛才的函數理論是一致的，先觸發mousemove事件，然后獲取了事件之后，分別判斷瀏覽器類型。這段代碼的優點是，不適用全局變量，并且可以隨用隨拿，只要調用這個函數，就能夠獲取鼠標坐標。

這兩段代碼，個人偏好于后者，現在先把這段代碼記下來，這段代碼應該是會經常被使用到的。

posted on 2014-09-23 10:41 玲兒靈 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/jymz/p/3987808.html

總結

以上是生活随笔為你收集整理的JS获取鼠标位置，兼容IE FF的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。