1.常見的事件位置屬性

e.pageX——相對整個頁面的座標

注意:IE6、IE7、IE8無該屬性

e.layerX——相對當前座標系的border左上角開始的座標

注意：在opera、IE6、IE7、IE8中這個屬性，而IE8以上表示相對當前座標系的border左上角開始的座標 + 滾動條滾過的距離

e.offsetX——相對當前座標系的border左上角開始的座標

注意：火狐中無該屬性

e.clientX——相對可視區域的座標

e.x——相對可視區域的座標

注意：火狐中無該屬性

2.pageX和clientX

pageX指滑鼠在頁面上的位置，以頁面左側為參考點

clientX指可視區域內離左側的距離，以滾動條滾動到的位置為參考點。各個瀏覽器相同。

即當有滾動條時clientX  小於  pageX

//ie6、7、8不識別pageX

PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)

頁面上的位置=可視區域位置+頁面滾動條切去高度-自身border高度

3.screenX

滑鼠在螢幕中的位置，指的是滑鼠到電腦螢幕左側的距離。 各個瀏覽器相同。

與clientX的區別是clientX是到瀏覽器的距離。

例如：當網頁縮小，拖動到螢幕中間時，screnX 大於 clientX

4、offsetX和layerX

為了相容瀏覽器，layerX是FF、chrome識別，offsetX是除了FF之外。

如果觸發元素設定了position，則offsetX等於layerX

如果頁面有滾動條，新增滾動的距離。

layerX:FF特有，是相對於父元素的位置，滑鼠相對於“觸發事件的元素的層級關係中離該元素最近的，設定了positio的父元素”的邊界的位置，從border的左上角開始定位，即如果這個父元素存在border，則座標原點在border的左上角，而不是內容區域的左上角。

offsetX:IE特有，滑鼠相對於“觸發事件的元素”的位置，從內容區域左上角開始定位，不是從border左上角開始！這個屬性比較好用，用來判斷滑鼠點在一個元素中的哪個位置很方便，FF

5.e.x

到可視區域的距離，FF不識別,有無滾動條相同，同clientX。

      opera，chrome和safari的event.x返回值和event.clientX相同。

      IE8、9、10的event.x返回值和event.clientX相同。

      ie7的e.x比e.clientX少2px。

注意：以上僅以X為例，有X的屬性就有對應的Y屬性，例如：e.pageX和e.pageY,他們是成對存在的。

6.offset詳解

scrollHeight: 獲取物件的滾動的高度。

scrollWidth:獲取物件的滾動的寬度

scrollLeft:設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離，即被捲起的寬度

scrollTop:設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離，即被捲起的高度

offsetHeight:獲取物件相對於版面或由父座標 offsetParent 屬性指定的父座標的高度(包括border)，即物件本身高+border上下寬度

offsetWidth:獲取物件相對於版面或由父座標 offsetParent 屬性指定的父座標的寬度(包括border)，即物件本身寬度+border左右寬度

offsetLeft:獲取物件相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置，即相對於父元素的左位移

offsetTop:獲取物件相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置，即相對於父元素的上位移

event.clientX： 相對文件的水平座標，即相對於可視區域的水平座標

event.clientY： 相對文件的垂直座標，即相對於可視區域的垂直座標

event.offsetX： 相對容器的水平座標，即相對於父元素的水平座標

event.offsetY： 相對容器的垂直座標，即相對於父元素的垂直座標

clientWidth:物件相對於網頁可見區域的寬度

clientHeight：物件相對於網頁可見區域的高度