有段時間沒更新博客了，工作實在太忙了，加班加班再加班就是我們這個行業的常態吧、、、還好最近把工作進度完成了，終於有些空余時間了。關於《Javascript高級程序設計》系列，我並沒有棄坑，只不過最近在把這本書讀第二遍，主要針對一些第一遍沒看懂的部分，完成之后我會繼續更新的。
這篇文字主要一下三方面內容：
一、javascript獲取事件位置
二、Javascript獲取dom對象位置
三、Javascript獲取絕對坐標
四、瀏覽器相對桌面位置
一、javascript獲取事件位置
首先上圖，這個圖片是我在網上找到的，感覺做的比較好！
事件的位置主要涉及clientX,clientY,screenX,screenY,offsetX,offsetY 。
1.1 offsetX,offsetY
鼠標相對於事件源元素（srcElement）的X,Y坐標。
1.2 event.screenX、event.screenY
鼠標相對於用戶顯示器屏幕左上角的X,Y坐標。標准事件和IE事件都定義了這2個屬性
1.3 event.clientX、event.clientY
鼠標相對於瀏覽器窗口可視區域的X，Y坐標（窗口坐標），可視區域不包括工具欄和滾動條。標准事件和IE事件都定義了這2個屬性。
二、Javascript獲取dom對象位置
關於clientWidth offsetWidth scrollWidth 等的含義
offsetWidth(width+padding+border)
當前對象的寬度。
style.width也是當前對象的寬度(width+padding+border)。
區別：
1)style.width返回值除了數字外還帶有單位px；
2)如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小，style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值；
3)如果沒有給 HTML 元素指定過 width樣式，則 style.width 返回的是空字符串；
offsetHeight :(Height+padding+border)
當前對象的高度。
style.height也是當前對象的高度(height+padding+border)。
區別：
1)style.height返回值除了數字外還帶有單位px；
2)如對象的高度設定值為百分比高度,則無論頁面變高還是變矮，style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值；
3)如果沒有給 HTML 元素指定過 height樣式，則 style.height返回的是空字符串；
clientWidth: 獲取對象可見內容的寬度，不包括滾動條，不包括邊框；
clientHeight: 獲取對象可見內容的高度，不包括滾動條，不包括邊框；
三、Javascript獲取絕對坐標
直接獲取頁面元素絕對位置的js函數
var p = $("#DoSum"); var offset = p.offset(); alert(offset.left); alert(offset.top); //獲取元素的縱坐標 function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; } //獲取元素的橫坐標 function getLeft(e){ var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; }
還有getBoundingClientRect(),這個也可以獲得絕對坐標
x=oRect.left
y=oRect.top
四、瀏覽器相對桌面位置
clientWidth是對象看到的寬度（不含邊線,即border）
scrollWidth是對象實際內容的寬度（若無padding，那就是邊框之間距離，如有padding，就是左padding和右padding之間距離）。
offsetWidth是指對象自身的寬度，整型，單位像素（含邊線，如滾動條的占用的寬，值會隨着內容的輸入而不斷改變）。
clientWidth: 獲取對象可見內容的寬度，不包括滾動條，不包括邊框；
clientHeight: 獲取對象可見內容的高度，不包括滾動條，不包括邊框；