JS獲取鼠標(biāo)位置，兼容IE FF

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

第一段代碼是利用全局變量來獲取實(shí)時鼠標(biāo)的位置。

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認(rèn)為clientX是鼠標(biāo)相對整個頁面左上角的位置，而Firefox認(rèn)為是相對當(dāng)前所見頁面左上角的位置。而這段代碼最終返回的結(jié)果是整個頁面左上角的位置。這段代碼的缺陷是，xPos和yPos是實(shí)時變動的。

第二段代碼是通過函數(shù)獲取當(dāng)前時刻的鼠標(biāo)坐標(biāo)值

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??

?????};??

}??

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

這兩段代碼，個人偏好于后者，現(xiàn)在先把這段代碼記下來，這段代碼應(yīng)該是會經(jīng)常被使用到的。

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

轉(zhuǎn)載于:https://www.cnblogs.com/jymz/p/3987808.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。