JavaScript取得鼠標(biāo)絕對位置程序代碼介紹

更新時(shí)間：2012年09月16日 02:19:04 作者：

文章介紹了關(guān)于JavaScript在不同瀏覽器下取得鼠標(biāo)絕對位置相關(guān)函數(shù)用法及兼容性介紹，有需要的同學(xué)可參考一下

首先不同瀏覽器中event位置屬性的分析:

1. IE的event.x,event.y是以事件觸發(fā)元素的父元素外界為參考點(diǎn)(不包括滾動(dòng)距離)
2. Firefox的event.pageX,event.pageY是以body元素為參考點(diǎn)(包括滾動(dòng)距離)
3. event.clientX,event.clientY以瀏覽器左上角為參考點(diǎn)(不包括滾動(dòng)距離)
4. IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件觸發(fā)元素內(nèi)界的左上角為參考點(diǎn)(包括滾動(dòng)距離,當(dāng)有邊框時(shí),可能出現(xiàn)負(fù)數(shù))

然后是DOM對象高度屬性分析

1. scrollHeight: 獲取對象的滾動(dòng)高度
2. scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
3. scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
4. scrollWidth:獲取對象的滾動(dòng)寬度
5. offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
6. offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置
7. offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置

有了以上分析，寫出兩個(gè)取位置的函數(shù)

復(fù)制代碼代碼如下:

 
// 取X軸位置 
function mouseX(evt) { 
// firefox 
if (evt.pageX) return evt.pageX; 
// IE 
else if (evt.clientX) 
return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); 
else return null; 
} 
// 取Y軸位置 
function mouseY(evt) { 
// firefox 
if (evt.pageY) return evt.pageY; 
// IE 
else if (evt.clientY) 
return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
else return null; 
} 

獲取Html控件的絕對位置的兩種方法

復(fù)制代碼代碼如下:

 
function getAbsPoint(e){ 
var x = e.offsetLeft, y = e.offsetTop; 
while (e = e.offsetParent) { 
x += e.offsetLeft; 
y += e.offsetTop; 
} 
alert("x:" + x + "," + "y:" + y); 
} 
function getAbsPoint(obj){ 
var x, y; 
oRect = obj.getBoundingClientRect(); 
x = oRect.left 
y = oRect.top 
alert("(" + x + "," + y + ")") 
} 

注意

document.body.scrollLeft，document.body.scrollTop只用于IE6以前的版本，在IE6中，對沒有宣告 DOCTYPE,或者宣告的是transitional DOCTYPE，那么IE6將使用document.documentElement.scrollLeft 來獲取鼠標(biāo)的絕對位置

您可能感興趣的文章: