關於js滑鼠事件綜合各大瀏覽器能獲取到座標的屬性總共以下五種
- event.clientX/Y
- event.pageX/Y
- event.offsetX/Y
- event.layerX/Y
- event.screenX/Y
screenX:滑鼠位置相對於使用者螢幕水平偏移量，而screenY也就是垂直方向的，此時的參照點也就是原點是螢幕的左上角。
clientX:跟screenX相比就是將參照點改成了瀏覽器內容區域的左上角，該參照點會隨之滾動條的移動而移動。
pageX：參照點也是瀏覽器內容區域的左上角，但它不會隨著滾動條而變動
clientX/Y:
clientX/Y獲取到的是觸發點相對瀏覽器可視區域左上角距離，不隨頁面滾動而改變
相容性：所有瀏覽器均支援
pageX/Y:
pageX/Y獲取到的是觸發點相對文件區域左上角距離，會隨著頁面滾動而改變
相容性：除IE6/7/8不支援外，其餘瀏覽器均支援
offsetX/Y:
offsetX/Y獲取到是觸發點相對被觸發dom的左上角距離，不過左上角基準點在不同瀏覽器中有區別，其中在IE中以內容區左上角為基準點不包括邊框，如果觸發點在邊框上會返回負值，而chrome中以邊框左上角為基準點。
相容性：IE所有版本，chrome，Safari均完美支援，Firefox不支援
layerX/Y:
layerX/Y獲取到的是觸發點相對被觸發dom左上角的距離，數值與offsetX/Y相同，這個變數就是firefox用來替代offsetX/Y的，基準點為邊框左上角，但是有個條件就是，被觸發的dom需要設定為position:relative或者position:absolute，否則會返回相對html文件區域左上角的距離
相容性：IE6/7/8不支援，opera不支援，IE9/10和Chrome、Safari均支援
screenX/Y:
screenX/Y獲取到的是觸發點相對顯示器螢幕左上角的距離，不隨頁面滾動而改變
相容性：所有瀏覽器均支援
區分innerHeight與clientHeight、innerWidth與clientWidth、scrollLeft與pageXOffset等屬性
window物件：
（1）innerHeight屬性：視窗中文件顯示區域的高度，不包括選單欄、工具欄等部分。該屬性可讀可寫。
IE不支援該屬性，IE中body元素的clientHeight屬性與該屬性相同。
（2)innerWidth屬性：視窗中文件顯示區域的寬度，同樣不包括邊框。該屬性可讀可寫。
IE不支援該屬性，IE中body元素的clientWidth屬性與該屬性相同。
clientHeight與clientWidth屬性是隻讀的。
另外，IE不支援outerWidth、outerHeight屬性。
(3)pageXOffset屬性：整數只讀屬性，表示文件向右滾動過的畫素數。
IE不支援該屬性，使用body元素的scrollLeft屬性替代。
(4)pageYOffset屬性：整數只讀屬性，表示文件向下滾動過的畫素數。
IE不支援該屬性，使用body元素的scrollTop屬性替代。
相容IE與DOM瀏覽器，如何獲取視窗中文件顯示區域的寬度及高度，使用?:條件語句，如下：
windows.innerWidth ? windows.innerWidth : document.body.clientWidth;
windows.innerHeight ? windows.innerHeight : document.body.clientHeight;
元素物件：
offsetLeft、offsetTop屬性：獲取元素相對於文件左上角的座標位置。