javascript 事件對象 坐標事件說明
2024-05-06 12:37:07
供稿：網友
測試瀏覽器的版本:
IETester 6 ,7
IE 8.0
Firefox 3.5.5
Chrome 4.1.249.1064 (45376)
Opera 9.64
Safari 4.0
先來看看各個主流瀏覽器都有哪些坐標屬性以及它們的意義
在IE中
event.offsetX
event.offsetY
相對于e.srcElement坐標
設置或獲取鼠標指針位置相對于觸發事件的對象的 x 坐標。
設置或獲取鼠標指針位置相對于觸發事件的對象的 y 坐標。
event.clientX
event.clientY
總是相對于視口
設置或獲取鼠標指針位置相對于窗口客戶區域的 x 坐標，其中客戶區域不包括窗口自身的控件和滾動條。
設置或獲取鼠標指針位置相對于窗口客戶區域的 y 坐標，其中客戶區域不包括窗口自身的控件和滾動條。
event.x
event.y
雖然手冊上說是相對于文檔，但是ie6/7 中,他們倆的值跟clientX,clientY一致
但是這并不是嚴重的問題，因為視口相對坐標加上滾動條已卷去高度，依然可以得到真實的x(y),這個問題在ie8的標準模式下被解決
設置或獲取鼠標指針位置相對于父文檔的 x 像素坐標。
設置或獲取鼠標指針位置相對于父文檔的 y 像素坐標。
event.screenX
event.screenY
設置或獲取獲取鼠標指針位置相對于用戶屏幕的 x 坐標。
設置或獲取獲取鼠標指針位置相對于用戶屏幕的 y 坐標。
在FireFox中
event.layerX
event.layerY
相對于e.srcElement坐標
設置或獲取鼠標指針位置相對于觸發事件的對象的 x 坐標。
設置或獲取鼠標指針位置相對于觸發事件的對象的 y 坐標。
event.clientX
event.clientY
總是相對于視口
設置或獲取鼠標指針位置相對于窗口客戶區域的 x 坐標，其中客戶區域不包括窗口自身的控件和滾動條。
設置或獲取鼠標指針位置相對于窗口客戶區域的 y 坐標，其中客戶區域不包括窗口自身的控件和滾動條。
event.pageX
event.pageY
設置或獲取鼠標指針位置相對于父文檔的 x 像素坐標。
設置或獲取鼠標指針位置相對于父文檔的 y 像素坐標。
event.screenX
event.screenY
設置或獲取獲取鼠標指針位置相對于用戶屏幕的 x 坐標。
設置或獲取獲取鼠標指針位置相對于用戶屏幕的 y 坐標。
實際上IE和Firefox已經囊括了所有的屬性，其他的瀏覽器將這些屬性進行了組合，但是意義完全一致
Chrome 和 Safari
Chrome和Safari這哥倆辦事兒則灰常周全，它們收錄了所有的坐標屬性，包括
event.offsetX
event.offsetY
event.layerX
event.layerY
event.clientX
event.clientY
event.x
event.y
event.pageX
event.pageY
注意:Chrome和Safari的event.x event.y 跟IE6 7 的表現一致，它們和event.clientX,event.clientY相等
