取得瀏覽器當前滑鼠的X,Y座標的JavaScript指令碼及document元素的一些重要屬性

原文地址: http://www.lvjiyong.com/item/qude-dangqian-shubiao-de-X-Y-zuobiao-37525

為了讓滑鼠移到小圖上顯示大圖,我利用滑鼠事件建立了一個層來顯示大圖.當然之前最好得到XY座標

取得當前滑鼠的X,Y座標function SelfXY(){
    var yScrolltop;
    var xScrollleft;
    if (self.pageYOffset || self.pageXOffset) {
        yScrolltop = self.pageYOffset;
        xScrollleft = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){     // Explorer 6 Strict
        yScrolltop = document.documentElement.scrollTop;
        xScrollleft = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
        yScrolltop = document.body.scrollTop;
        xScrollleft = document.body.scrollLeft;
    }
    arrayPageScroll = new Array(xScrollleft + event.clientX ,yScrolltop + event.clientY)
    return arrayPageScroll;
}

附:滑鼠及對象座標控制屬性
offsetTop
擷取對象相對於版面或由 offsetParent 屬性指定的父座標的計算頂端位置。

offsetLeft
擷取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置。

offsetHeight
擷取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度。
IE、Opera 認為 offsetHeight = clientHeight + 捲軸 + 邊框。
NS、FF 認為 offsetHeight 是網頁內容實際高度，可以小於 clientHeight。

offsetWidth
擷取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的寬度。

offsetParent
擷取定義對象 offsetTop 和 offsetLeft 屬性的容器物件的引用。

clientHeight
擷取對象的高度，不計算任何邊距、邊框、捲軸或可能應用到該對象的補白。
大家對 clientHeight 都沒有什麼異議，都認為是內容可視地區的高度，也就是說頁面瀏覽器中可以看到內容的這個地區的高度，一般是最後一個工具條以下到狀態列以上的這個地區，與頁面內容無關。

clientLeft
擷取 offsetLeft 屬性和用戶端區域的實際左邊之間的距離。

clientTop
擷取 offsetTop 屬性和用戶端區域的實際頂端之間的距離。

clientWidth
擷取對象的寬度，不計算任何邊距、邊框、捲軸或可能應用到該對象的補白。

SCROLL屬性
scroll
設定或擷取滾動是否關閉。

scrollHeight
擷取對象的滾動高度。

scrollLeft
設定或擷取位於對象左邊界和視窗中目前可見內容的最左端之間的距離。

scrollTop
設定或擷取位於對象最頂端和視窗中可見內容的最頂端之間的距離。

scrollWidth
擷取對象的滾動寬度。

event屬性
x
設定或擷取滑鼠指標位置相對於父文檔的 x 像素座標。

screenX
設定或擷取擷取滑鼠指標位置相對於使用者螢幕的 x 座標

offsetX
設定或擷取滑鼠指標位置相對於觸發事件的對象的 x 座標。

clientX
設定或擷取滑鼠指標位置相對於視窗用戶端區域的 x 座標，其中用戶端區域不包括視窗自身的控制項和捲軸

IE與FireFox的相容性問題（JoeCom整理--未完待續）

1. window.event
   • IE：有window.event對象
   • FF：沒有window.event對象。可以通過給函數的參數傳遞event對象。如onmousemove=doMouseMove(event)
2. 滑鼠當前座標
   • IE：event.x和event.y。
   • FF：event.pageX和event.pageY。
   • 通用：兩者都有event.clientX和event.clientY屬性。
3. 滑鼠當前座標(加上捲軸滾過的距離)
   • IE：event.offsetX和event.offsetY。
   • FF：event.layerX和event.layerY。
4. 標籤的x和y的座標位置：style.posLeft 和 style.posTop
   • IE：有。
   • FF：沒有。
   • 通用：object.offsetLeft 和 object.offsetTop。
5. 表單的高度和寬度
   • IE：document.body.offsetWidth和document.body.offsetHeight。注意：此時頁面一定要有body標籤。
   • FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
   • 通用：document.body.clientWidth和document.body.clientHeight。
6. 添加事件
   • IE：element.attachEvent("onclick", func);。
   • FF：element.addEventListener("click", func, true)。
   • 通 用：element.onclick=func。雖然都可以使用onclick事件，但是onclick和上面兩種方法的效果是不一樣的，onclick 只有執行一個過程，而attachEvent和addEventListener執行的是一個過程列表，也就是多個過程。例如： element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)這樣func1和func2都會被執行。
7. 標籤的自訂屬性
   • IE：如果給標籤div1定義了一個屬性value，可以div1.value和div1["value"]取得該值。
   • FF：不能用div1.value和div1["value"]取。
   • 通用：div1.getAttribute("value")。
8. 父節點、子節點和刪除節點
   • IE：parentElement、parement.children，element.romoveNode(true)。
   • FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。
9. 畫圖
   • IE：VML。
   • FF：SVG。
10. CSS：透明
    • IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
    • FF：opacity:0.6。
11. CSS：圓角
    • IE：不支援圓角。
    • FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。
12. CSS：雙線凹凸邊框
    • IE：border:2px outset;。
    • FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。