js獲取鼠標(biāo)位置雜談附多瀏覽器兼容代碼
更新時(shí)間：2008年11月27日 14:30:08 作者：
最近在搞一個(gè)AJAX的小功能，目的是用浮動(dòng)div框顯示當(dāng)前鼠標(biāo)下控件的詳細(xì)信息，其中獲得鼠標(biāo)位置這塊害得我走了很多冤枉路，因?yàn)閴焊鶝]有想到我下面提到的第二點(diǎn)的區(qū)別，所以我的頁面出來總是找不到我之前定義的那個(gè)div
其實(shí)獲得鼠標(biāo)位置就是一句話的事情，但是要是不了解瀏覽器間的區(qū)別，整個(gè)過程就會(huì)讓人很郁悶，區(qū)別在與：
1.IE下獲得x和y軸的距離分別用event.x和event.y；
FF下獲得x和y軸的距離分別用event.pageX和event.pageY；
2.IE下用此方法獲得的位置是不算滾動(dòng)條滾過的位置的，即它只會(huì)算到瀏覽器邊緣；
FF則會(huì)算進(jìn)滾過去的那些位置；
（這個(gè)地方很讓我崩潰，為這么點(diǎn)小區(qū)別我把所有用到的程序全部重寫了一遍，囧死……）
解決1的辦法，無非是判斷一下瀏覽器，然后用什么方式；
解決2的辦法，是在IE的情況下在x和y軸分別加上document.documentElement.scrollTop和document.documentElement.scrollLeft；
對(duì)JS我了解的比較少，如果大家有更好的建議歡迎留言指教！謝謝
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
1.IE下獲得x和y軸的距離分別用event.x和event.y；
FF下獲得x和y軸的距離分別用event.pageX和event.pageY；
2.IE下用此方法獲得的位置是不算滾動(dòng)條滾過的位置的，即它只會(huì)算到瀏覽器邊緣；
FF則會(huì)算進(jìn)滾過去的那些位置；
（這個(gè)地方很讓我崩潰，為這么點(diǎn)小區(qū)別我把所有用到的程序全部重寫了一遍，囧死……）
解決1的辦法，無非是判斷一下瀏覽器，然后用什么方式；
解決2的辦法，是在IE的情況下在x和y軸分別加上document.documentElement.scrollTop和document.documentElement.scrollLeft；
對(duì)JS我了解的比較少，如果大家有更好的建議歡迎留言指教！謝謝
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(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新窗口被攔截的問題
- JS實(shí)現(xiàn)窗口加載時(shí)模擬鼠標(biāo)移動(dòng)的方法
- JS獲取鼠標(biāo)位置距瀏覽器窗口距離的方法示例
相關(guān)文章
加入收藏夾功能在網(wǎng)上可以搜索到很多相關(guān)的文章，本文要為大家介紹的是如何使用原生js來實(shí)現(xiàn)所謂的收藏，感興趣的朋友可以參考下2013-10-10
JavaScript 日期時(shí)間選擇器一些小結(jié)
flatpickr 是一個(gè)輕量級(jí)、注重精益、由 UX 驅(qū)動(dòng)和可擴(kuò)展的 JavaScript 日期時(shí)間選擇器。這篇文章主要介紹了JavaScript 日期時(shí)間選擇器,需要的朋友可以參考下2018-04-04
javascript-hashchange事件和歷史狀態(tài)管理實(shí)例分析
這篇文章主要介紹了javascript-hashchange事件和歷史狀態(tài)管理,結(jié)合實(shí)例形式分析了javascript-hashchange基本功能、原理及歷史狀態(tài)管理相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
基于JavaScript實(shí)現(xiàn)除夕煙花秀與隨機(jī)祝福語
新年即將來臨，本文將為大家介紹一個(gè)基于JavaScript實(shí)現(xiàn)的頁面特效：煙花秀+春節(jié)隨機(jī)祝福語。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-01-01
js 開發(fā)之a(chǎn)utocomplete="off"在chrom中失效的解決辦法
這篇文章主要介紹了js 開發(fā)之a(chǎn)utocomplete="off"在chrom中失效的解決辦法的相關(guān)資料,希望通過本文能幫助到大家，解決遇到這樣的問題，需要的朋友可以參考下2017-09-09
JS數(shù)組Reduce方法功能與用法實(shí)例詳解
這篇文章主要介紹了JS數(shù)組Reduce方法功能與用法,結(jié)合實(shí)例形式詳細(xì)分析了JS數(shù)組Reduce方法操作數(shù)組統(tǒng)計(jì)、去重等相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
本文將詳細(xì)介紹js移除事件 js綁定事件的實(shí)現(xiàn)過程，需要了解的朋友可以參考下2012-11-11
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)左右輪播圖的具體代碼，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2017-01-01
這篇文章主要為大家詳細(xì)介紹了ionic2.0雙擊返回鍵退出應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了JavaScript隨機(jī)生成顏色的方法的相關(guān)資料,非常不錯(cuò)，代碼簡單易懂，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10