js獲取鼠標(biāo)位置雜談附多瀏覽器兼容代碼
更新時(shí)間：2008年11月27日 14:30:08 作者：
最近在搞一個(gè)AJAX的小功能，目的是用浮動(dòng)div框顯示當(dāng)前鼠標(biāo)下控件的詳細(xì)信息，其中獲得鼠標(biāo)位置這塊害得我走了很多冤枉路，因?yàn)閴焊鶝](méi)有想到我下面提到的第二點(diǎn)的區(qū)別，所以我的頁(yè)面出來(lái)總是找不到我之前定義的那個(gè)div
其實(shí)獲得鼠標(biāo)位置就是一句話的事情，但是要是不了解瀏覽器間的區(qū)別，整個(gè)過(guò)程就會(huì)讓人很郁悶，區(qū)別在與：
1.IE下獲得x和y軸的距離分別用event.x和event.y；
FF下獲得x和y軸的距離分別用event.pageX和event.pageY；
2.IE下用此方法獲得的位置是不算滾動(dòng)條滾過(guò)的位置的，即它只會(huì)算到瀏覽器邊緣；
FF則會(huì)算進(jìn)滾過(guò)去的那些位置；
（這個(gè)地方很讓我崩潰，為這么點(diǎn)小區(qū)別我把所有用到的程序全部重寫了一遍，囧死……）
解決1的辦法，無(wú)非是判斷一下瀏覽器，然后用什么方式；
解決2的辦法，是在IE的情況下在x和y軸分別加上document.documentElement.scrollTop和document.documentElement.scrollLeft；
對(duì)JS我了解的比較少，如果大家有更好的建議歡迎留言指教！謝謝
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
1.IE下獲得x和y軸的距離分別用event.x和event.y；
FF下獲得x和y軸的距離分別用event.pageX和event.pageY；
2.IE下用此方法獲得的位置是不算滾動(dòng)條滾過(guò)的位置的，即它只會(huì)算到瀏覽器邊緣；
FF則會(huì)算進(jìn)滾過(guò)去的那些位置；
（這個(gè)地方很讓我崩潰，為這么點(diǎn)小區(qū)別我把所有用到的程序全部重寫了一遍，囧死……）
解決1的辦法，無(wú)非是判斷一下瀏覽器，然后用什么方式；
解決2的辦法，是在IE的情況下在x和y軸分別加上document.documentElement.scrollTop和document.documentElement.scrollLeft；
對(duì)JS我了解的比較少，如果大家有更好的建議歡迎留言指教！謝謝
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- javascript窗口寬高,鼠標(biāo)位置,滾動(dòng)高度(詳細(xì)解析)
- JS獲得鼠標(biāo)位置（兼容多瀏覽器ie,firefox）腳本之家修正版
- 基于JavaScript實(shí)現(xiàn) 獲取鼠標(biāo)點(diǎn)擊位置坐標(biāo)的方法
- js獲取鼠標(biāo)位置實(shí)例詳解
- js獲取鼠標(biāo)點(diǎn)擊的位置實(shí)現(xiàn)思路及代碼
- JavaScript取得鼠標(biāo)絕對(duì)位置程序代碼介紹
- firefox中用javascript實(shí)現(xiàn)鼠標(biāo)位置的定位
- javascript之鼠標(biāo)拖動(dòng)位置互換效果代碼
- JavaScript中獲取鼠標(biāo)位置相關(guān)屬性總結(jié)
- JS判斷鼠標(biāo)進(jìn)入容器的方向與window.open新窗口被攔截的問(wèn)題
- JS實(shí)現(xiàn)窗口加載時(shí)模擬鼠標(biāo)移動(dòng)的方法
- JS獲取鼠標(biāo)位置距瀏覽器窗口距離的方法示例
相關(guān)文章
這篇文章主要介紹了JS是按值傳遞還是按引用傳遞(推薦)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
Kotlin學(xué)習(xí)第一步 kotlin語(yǔ)法特性
Kotlin學(xué)習(xí)第一步，從kotlin語(yǔ)法特性開(kāi)始學(xué)習(xí)，包括變量定義、函數(shù)擴(kuò)展、Parcelable序列化、編寫工具類等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了webpack中如何加載靜態(tài)文件的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
js簡(jiǎn)單網(wǎng)速測(cè)試方法完整實(shí)例
這篇文章主要介紹了js簡(jiǎn)單網(wǎng)速測(cè)試方法,以完整實(shí)例形式分析了JavaScript基于網(wǎng)頁(yè)圖片下載進(jìn)行測(cè)試網(wǎng)速的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12
JavaScript字符串_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript中的字符串就是用''或""括起來(lái)的字符表示。下面通過(guò)本文給大家介紹JavaScript字符串的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-06-06
今天小編就為大家分享一篇layui導(dǎo)出所有數(shù)據(jù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JavaScript 通過(guò)模式匹配實(shí)現(xiàn)重載
昨天rank同學(xué)向我提出一個(gè)問(wèn)題，在實(shí)際應(yīng)用中有些接口需要提供類似于函數(shù)重載的功能，以方便開(kāi)發(fā)者組織代碼邏輯，簡(jiǎn)化使用者調(diào)用。2010-08-08
這篇文章主要介紹了Ajax 加載數(shù)據(jù)，主要是為了查詢表的顯示，不用嵌入php通過(guò)ajax調(diào)用，現(xiàn)在手機(jī)端的更多顯示功能都是通過(guò)ajax實(shí)現(xiàn)的2017-01-01
Bootstrap Metronic完全響應(yīng)式管理模板學(xué)習(xí)筆記
這篇文章主要為大家分享了Bootstrap Metronic完全響應(yīng)式管理模板學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下2016-07-07
Bootstrap柵格系統(tǒng)使用方法及頁(yè)面調(diào)整變形的解決方法
這篇文章主要介紹了Bootstrap柵格系統(tǒng)使用方法及頁(yè)面調(diào)整變形的解決方法,需要的朋友可以參考下2017-03-03