用 javascript 擷取當頁面上滑鼠(游標)位置在許多情況下都會用到,比如拖放,懸停提示(tooltip) 等等。當然,這裡我們依然要面對瀏覽器的相容問題,在不同的瀏覽器下,對這些相關的屬性處理方式也不同,本文詳細介紹了瀏覽器在處理這些屬性時的差異和最終的解決方案。
--------------------------------------------------------------
Javascript:
1 <script type="text/javascript">
2 // 說明:擷取滑鼠位置
3 // 整理:http://www.codebit.cn
4 // 來源:http://www.webreference.com
5 function mousePosition(ev)
6 {
7 if(ev.pageX || ev.pageY)
8 {
9 return
10 {x:ev.pageX, y:ev.pageY}; }
11 return
12 {
13 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop }; }
14 </script>
上面的代碼我們在 ,由於這個需求我們經常用到,所以我們將這段代碼獨立成一篇文章,供新手查詢。
使用方式:
Code:
1 document.onmousemove = mouseMove;
2
3 function mouseMove(ev){
4 ev = ev || window.event;
5 var mousePos = mousePosition(ev);
6 }
關於代碼的詳細說明,原文中已經介紹,現轉到此處:
我們首先要聲明一個 evnet 對象,無論移動、點擊、按鍵等,都會啟用一個 evnet ,在 Internet Explorer 裡, event 是全域變數,會被儲存在 window.event 裡. 在 firefox 或者其他瀏覽器,event 會被相應的函數擷取.當我們將mouseMove函數賦值於document.onmousemove,mouseMove 會擷取滑鼠移動事件。
為了讓 ev 在所有瀏覽器下擷取了 event 事件,在Firefox下"||window.event"將不起作用,因為ev已經有了賦值。在 MSIE 中 ev 為空白,所以得到 window.event 。
因為在這篇文章中我們需要多次擷取滑鼠位置,所以我們設計了一個 mousePosition 函數,它包含一個參數 : event 。
因為我們要在 MSIE 和其他瀏覽器下運行,Firefox 和其他瀏覽器用 event.pageX 和 event.pageY 來表示滑鼠相對於文檔的位置,如果你有一個 500*500 的視窗並且你的滑鼠在絕對中間,那麼 pageX 和 pageY 的值都是 250,如果你向下滾動 500, 那麼 pageY 將變成 750。
MSIE 正好相反,它使用 event.clientX 和 event.clientY 表示滑鼠相當於視窗的位置,而不是文檔。在同樣的例子中,如果你向下滾動500,clientY 依然是 250,因此,我們需要添加 scrollLeft 和 scrollTop 這兩個相對於文檔的屬性。最後,MSIE 中文檔並不是從 0,0 開始,而是通常有一個小的邊框(通常是 2 象素),邊框的大小定義在 document.body.clientLeft 和 clientTop 中,我們也把這些加進去。
很幸運,我們現在已經用 mousePosition 函數解決了座標問題,不需為此費心了。