pageX、clientX、screenX、offsetX、layerX、x

參考：http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html

 

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高度,仍是直接上圖比較清楚

三、screenX
鼠標在屏幕中的位置，指的是鼠標到電腦屏幕左側的距離。 各個瀏覽器相同。
與clientX的區別是clientX是到瀏覽器的距離。
 例如：當網頁縮小，拖動到屏幕中間時，screnX 大於 clientX

四、offsetX和layerX
爲了兼容瀏覽器，layerX是FF、chrome識別，offsetX是除了FF以外。

若是觸發元素設置了position，則offsetX等於layerX
若是頁面有滾動條，添加滾動的距離。

layerX:FF特有，是相對於父元素的位置，鼠標相對於「觸發事件的元素的層級關係中離該元素最近的，設置了position的父元素」的邊界的位置，從border的左上角開始定位，即若是這個父

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

沒有直接替換的屬性。

點擊li，若是UL設置了position則layerX相對於UL，若是沒有則向父級冒泡尋找設置了position的元素，直到根節點body。
offsetX是相對於被點擊了的LI元素。

五、e.xFF不識別到可視區域的距離，有無滾動條相同，同clientXopera，chrome和safari的event.x返回值和event.clientX相同IE8910event.x返回值和event.clientX相同ie7e.x比e.clientX少2px