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

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

沒有直接替換的屬性。

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

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

轉載于:https://www.cnblogs.com/leo-lpf/p/6251799.html

總結

以上是生活随笔為你收集整理的pageX、clientX、screenX、offsetX、layerX、x的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。