廢話不多說,下面分別檢測各個瀏覽器下的
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 相對整個頁面的座標 e.layerx 相對當前座標系...
滑鼠位置(跨瀏覽器)
一 滑鼠事件屬性 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...