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坐標
設置或獲取鼠標指針位置相對于觸發(fā)事件的對象的 x 坐標。
設置或獲取鼠標指針位置相對于觸發(fā)事件的對象的 y 坐標。

event.clientX
event.clientY
總是相對于視口
設置或獲取鼠標指針位置相對于窗口客戶區(qū)域的 x 坐標，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
設置或獲取鼠標指針位置相對于窗口客戶區(qū)域的 y 坐標，其中客戶區(qū)域不包括窗口自身的控件和滾動條。

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坐標
設置或獲取鼠標指針位置相對于觸發(fā)事件的對象的 x 坐標。
設置或獲取鼠標指針位置相對于觸發(fā)事件的對象的 y 坐標。

event.clientX
event.clientY
總是相對于視口
設置或獲取鼠標指針位置相對于窗口客戶區(qū)域的 x 坐標，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
設置或獲取鼠標指針位置相對于窗口客戶區(qū)域的 y 坐標，其中客戶區(qū)域不包括窗口自身的控件和滾動條。

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相等

上一篇：javascript 全等號運算符使用說明

下一篇：js 右下角彈窗效果代碼(IE only)