JavaScript取得滑鼠絕對位置程式程式碼介紹
阿新 • • 發佈:2019-01-26
首先不同瀏覽器中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; }
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 來獲取滑鼠的絕對位置