各瀏覽器的滑鼠位置測試

2021-07-14 07:05:27 字數 2388 閱讀 2361

e.pagex

e.layerx

e.offsetx

e.clientx

e.x屬性;

測試

瀏覽器

ff9/chrome15/opera11.52/safari5(win)/ie6/7/8/9

測試**:

"">

圖示:

測試結果如下:

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點。

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

各瀏覽器的滑鼠位置測試

廢話不多說,下面分別檢測各個瀏覽器下的 e.pagex e.layerx e.offsetx e.clientx e.x屬性 測試瀏覽器 ff9 chrome15 opera11.52 safari5 win ie6 7 8 9 圖示 測試結果如下 chrome e.pagex 相對整個頁面的座標 ...

滑鼠位置(跨瀏覽器)

一 滑鼠事件屬性 1.clientx,clienty 相對於可見視點 visual viewport 的滑鼠位置,即當前瀏覽器顯示區域 視窗 的位置,點選客戶端礦口的左上角時 clientx 和 clienty 都為0,即使使用者拖動了水平或垂直滾動條 document.onclick functi...

各瀏覽器CSS hack

區別 ie6與 ff background orange background blue 區別 ie6與 ie7 background green important background blue 區別 ie7與 ff background orange background green 區別 f...