event對象的clientX,offsetX,screenX,pageX

標籤：

chrome：

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

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

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

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

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

ff：

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

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

e.offsetX——無

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

e.x——無

opera：

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

e.layerX——無

e.offsetX——相對當前座標系的內容地區左上方開始的座標

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

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

safari：（這個和chrome是一樣的）

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

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

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

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

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

 

IE9：

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

e.layerX——相對當前座標系的border左上方開始的座標 + 捲軸滾過的距離（這個NB轟轟了····=。=）

e.offsetX——相對當前座標系的內容地區左上方開始的座標

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

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

IE8：

e.pageX——無

e.layerX——無

e.offsetX——相對當前座標系的內容地區左上方開始的座標

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

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

IE7：

e.pageX——無

e.layerX——無

e.offsetX——相對當前座標系的內容地區左上方開始的座標

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

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

IE6：

e.pageX——無

e.layerX——無

e.offsetX——相對當前座標系的內容地區左上方開始的座標

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

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

 

 

2.PageX和clientX pageX指滑鼠在頁面上的位置，以頁面左側為參考點 clientX指可視地區內離左側的距離，以捲軸滾動到的位置為參考點。各個瀏覽器相同。 即當有捲軸時clientX 小於 pageX

//ie678不識別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特有，是相對於父元素的位置，滑鼠相對於“觸發事件的元素的層級關係中離該元素最近的，設定了position的父元素”的邊界的位置，從border的左上方開始定位，即如果這個父

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

沒有直接替換的屬性。

event對象的clientX,offsetX,screenX,pageX