Javascript在IE或Firefox下獲取鼠標(biāo)位置的代碼
更新時間：2009年12月18日 00:56:48 作者：
由于Firefox和IE等瀏覽器之間對JS解釋的方式不一樣，F(xiàn)irefox下面獲取鼠標(biāo)位置不能夠直接使用clientX來獲取。網(wǎng)上說的一般都是觸發(fā)mousemove事件才行。我這里有兩段代碼，思路都一樣，就是風(fēng)格不同。
第一段代碼是利用全局變量來獲取實時鼠標(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ù)獲取當(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
};
}
這段代碼的來源是這里，這個網(wǎng)站還提供了一些簡單的樣例給我們玩耍。這個函數(shù)和剛才的函數(shù)理論是一致的，先觸發(fā)mousemove事件，然后獲取了事件之后，分別判斷瀏覽器類型。這段代碼的優(yōu)點是，不適用全局變量，并且可以隨用隨拿，只要調(diào)用這個函數(shù)，就能夠獲取鼠標(biāo)坐標(biāo)。
這兩段代碼，個人偏好于后者，現(xiàn)在先把這段代碼記下來，這段代碼應(yīng)該是會經(jīng)常被使用到的。
復(fù)制代碼 代碼如下:
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ù)獲取當(dāng)前時刻的鼠標(biāo)坐標(biāo)值
復(fù)制代碼 代碼如下:
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
};
}
這段代碼的來源是這里，這個網(wǎng)站還提供了一些簡單的樣例給我們玩耍。這個函數(shù)和剛才的函數(shù)理論是一致的，先觸發(fā)mousemove事件，然后獲取了事件之后，分別判斷瀏覽器類型。這段代碼的優(yōu)點是，不適用全局變量，并且可以隨用隨拿，只要調(diào)用這個函數(shù)，就能夠獲取鼠標(biāo)坐標(biāo)。
這兩段代碼，個人偏好于后者，現(xiàn)在先把這段代碼記下來，這段代碼應(yīng)該是會經(jīng)常被使用到的。
相關(guān)文章
使用javascript函數(shù)編寫簡單銀行取錢存錢流程
本文通過實例代碼給大家講解了使用javascript函數(shù)編寫簡單銀行取錢存錢流程，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了 jstree單選功能的實現(xiàn)方法,需要的朋友可以參考下2017-06-06
js提示框替代系統(tǒng)alert,自動關(guān)閉alert對話框的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s提示框替代系統(tǒng)alert,自動關(guān)閉alert對話框的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
下面小編就為大家?guī)硪黄猨s 判斷一組日期是否是連續(xù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
js常用方法、檢查是否有特殊字符串、倒序截取字符串操作完整示例
這篇文章主要介紹了js常用方法、檢查是否有特殊字符串、倒序截取字符串操作,結(jié)合完整實例形式分析了JavaScript字符串轉(zhuǎn)換、檢測、倒序、截取等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
比較實用的多款瀏覽器判斷代碼，需要的朋友可以收集下，適合需要區(qū)別對待不同瀏覽器，執(zhí)行不用的操作的代碼。2010-04-04
這篇文章主要介紹了使用js動態(tài)移動滾動條至底部,需要的朋友可以參考下2014-04-04
javascript完整操作Table的增加行，刪除行的列子大全
非常漂亮的js操作table行代碼函數(shù)。比較方便2008-10-10
今天小編就為大家分享一篇淺談layui里的上傳控件問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
不管瀏覽器更新的多快，號稱多么支持標(biāo)準(zhǔn)。廠商不同，他們之間還是有很多差異。我們需要區(qū)分出這些差異，針對不同的瀏覽器做不同的處理。2015-10-10