Javascript在IE或Firefox下獲取鼠標(biāo)位置的代碼

2024-05-06 14:12:20

字體：大中小

供稿：網(wǎng)友

第一段代碼是利用全局變量來獲取實(shí)時(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;
}
});

因?yàn)镮E和Firefox對(duì)clientX的解析不一樣，IE認(rèn)為clientX是鼠標(biāo)相對(duì)整個(gè)頁面左上角的位置，而Firefox認(rèn)為是相對(duì)當(dāng)前所見頁面左上角的位置。而這段代碼最終返回的結(jié)果是整個(gè)頁面左上角的位置。這段代碼的缺陷是，xPos和yPos是實(shí)時(shí)變動(dòng)的。

第二段代碼是通過函數(shù)獲取當(dāng)前時(shí)刻的鼠標(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
};
}

這段代碼的來源是這里，這個(gè)網(wǎng)站還提供了一些簡(jiǎn)單的樣例給我們玩耍。這個(gè)函數(shù)和剛才的函數(shù)理論是一致的，先觸發(fā)mousemove事件，然后獲取了事件之后，分別判斷瀏覽器類型。這段代碼的優(yōu)點(diǎn)是，不適用全局變量，并且可以隨用隨拿，只要調(diào)用這個(gè)函數(shù)，就能夠獲取鼠標(biāo)坐標(biāo)。

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

上一篇：js textarea自動(dòng)增高并隱藏滾動(dòng)條

下一篇：js checkbox全選并將獲取值放到input里邊