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