JavaScript取得鼠標絕對位置程序代碼介紹
2024-05-06 14:21:16
供稿：網友
首先不同瀏覽器中event位置屬性的分析:
1. IE的event.x,event.y是以事件觸發元素的父元素外界為參考點(不包括滾動距離)
2. Firefox的event.pageX,event.pageY是以body元素為參考點(包括滾動距離)
3. event.clientX,event.clientY以瀏覽器左上角為參考點(不包括滾動距離)
4. IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件觸發元素內界的左上角為參考點(包括滾動距離,當有邊框時,可能出現負數)
然后是DOM對象高度屬性分析
1. scrollHeight: 獲取對象的滾動高度
2. scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
3. scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離
4. scrollWidth:獲取對象的滾動寬度
5. offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度
6. offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
7. offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
有了以上分析，寫出兩個取位置的函數
代碼如下:
// 取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控件的絕對位置的兩種方法
代碼如下:
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 來獲取鼠標的絕對位置
