各種瀏覽器的鼠標位置獲取方法

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左上角開始


綜合爲下表:

插入表格不方便,鴨梨很大啊


其中clientX是W3C標準的一個屬性,所以都挺符合的,其他的就看瀏覽器廠商的心情了。

對於非IE6/7/8來說,pageX屬性都可以獲取到鼠標事件發生處到整個頁面左邊的座標,IE6/7/8就只能通過clientX+scrollLeft來獲得相同的結果。


需要注意的是layerX和x這兩個屬性。

event.x本來是IE的,但是除了FF之外,其他的也都實現了這個屬性,但是opera,chrome和safari和IE的實現並不一致,opera,chrome和safari的event.x返回值和event.clientX相同

opera沒有實現layerX,IE9實現了,但是IE9又是個奇葩,layerX實現得稀奇古怪。


layerX與offsetX

除了ff,其他瀏覽器都實現了offsetX,opera跟隨IE系列,與IE實現相同,就是從內容區域邊界開始算起,就是上面圖示中的B點,chrome和safari從border邊界開始算起,就是上面圖示中的A點。


除了上面的一些區別,另外一個重要區別就是各個瀏覽器默認的邊界零點也不一致,計算的時候還需要根據瀏覽器不同來補充或刪減。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章