Javascript在IE或Firefox下獲取鼠標(biāo)位置的代碼
更新時(shí)間：2009年12月18日 00:56:48 作者：
由于Firefox和IE等瀏覽器之間對(duì)JS解釋的方式不一樣，F(xiàn)irefox下面獲取鼠標(biāo)位置不能夠直接使用clientX來(lái)獲取。網(wǎng)上說(shuō)的一般都是觸發(fā)mousemove事件才行。我這里有兩段代碼，思路都一樣，就是風(fēng)格不同。
第一段代碼是利用全局變量來(lái)獲取實(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è)頁(yè)面左上角的位置，而Firefox認(rèn)為是相對(duì)當(dāng)前所見(jiàn)頁(yè)面左上角的位置。而這段代碼最終返回的結(jié)果是整個(gè)頁(yè)面左上角的位置。這段代碼的缺陷是，xPos和yPos是實(shí)時(shí)變動(dòng)的。
第二段代碼是通過(guò)函數(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
};
}
這段代碼的來(lái)源是這里，這個(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)在先把這段代碼記下來(lái)，這段代碼應(yīng)該是會(huì)經(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;
}
});
因?yàn)镮E和Firefox對(duì)clientX的解析不一樣，IE認(rèn)為clientX是鼠標(biāo)相對(duì)整個(gè)頁(yè)面左上角的位置，而Firefox認(rèn)為是相對(duì)當(dāng)前所見(jiàn)頁(yè)面左上角的位置。而這段代碼最終返回的結(jié)果是整個(gè)頁(yè)面左上角的位置。這段代碼的缺陷是，xPos和yPos是實(shí)時(shí)變動(dòng)的。
第二段代碼是通過(guò)函數(shù)獲取當(dāng)前時(shí)刻的鼠標(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
};
}
這段代碼的來(lái)源是這里，這個(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)在先把這段代碼記下來(lái)，這段代碼應(yīng)該是會(huì)經(jīng)常被使用到的。
相關(guān)文章
本文主要分享了原生js實(shí)現(xiàn)仿慕課網(wǎng)的輪播效果。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
空值合并運(yùn)算符是一個(gè)邏輯運(yùn)算符,當(dāng)左側(cè)的操作數(shù)為null或undefined時(shí),會(huì)返回右側(cè)操作數(shù),否則返回左側(cè)操作數(shù),本文就來(lái)詳細(xì)的介紹一下如何使用2023-12-12
bootstrap布局是應(yīng)用得很廣泛的一種網(wǎng)頁(yè)布局方法，下面通過(guò)本文給大家介紹bootstrap頁(yè)面縮小變形的快速解決辦法，需要的朋友參考下吧2017-02-02
你的編程語(yǔ)言可以這樣做嗎？...2006-09-09
JS Math對(duì)象與Math方法實(shí)例小結(jié)
這篇文章主要介紹了JS Math對(duì)象與Math方法,結(jié)合實(shí)例形式總結(jié)分析了javascript中math對(duì)象常用屬性與方法相關(guān)使用技巧,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table使用方法，具有一定的實(shí)用性，感興趣的小伙伴們可以參考一下2016-02-02
微信小程序?qū)崿F(xiàn)點(diǎn)擊出現(xiàn)彈窗
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊出現(xiàn)彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JS二級(jí)菜單不同實(shí)現(xiàn)方法分析【4種方法】
這篇文章主要介紹了JS二級(jí)菜單不同實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了4種不同的二級(jí)下拉菜單實(shí)現(xiàn)方法,需要的朋友可以參考下2018-12-12
JS簡(jiǎn)單封裝的圖片無(wú)縫滾動(dòng)效果示例【測(cè)試可用】
這篇文章主要介紹了JS簡(jiǎn)單封裝的圖片無(wú)縫滾動(dòng)效果,結(jié)合完整實(shí)例形式分析了javascript針對(duì)圖片無(wú)縫滾動(dòng)功能實(shí)現(xiàn)的具體操作技巧,包括鼠標(biāo)事件響應(yīng)、事件函數(shù)及頁(yè)面元素屬性動(dòng)態(tài)變換等相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
無(wú)語(yǔ)，javascript居然支持中文(unicode)編程！
無(wú)語(yǔ)，javascript居然支持中文(unicode)編程！...2007-04-04