讀古今文學網 > 編寫高質量代碼:改善JavaScript程序的188個建議 > 建議125:設計鼠標指針定位方案 >

建議125:設計鼠標指針定位方案

當事件發生時,獲取鼠標指針的位置是很重要的操作。不同瀏覽器分別在各自事件對像中定義了不同的屬性,見表6.1。這些屬性都以像素值定義了鼠標指針的坐標,但它們參照的坐標系不同,從而使準確計算鼠標的位置(能夠兼容不同瀏覽器)成為一件很麻煩的事。

首先,screenX和screenY這兩個屬性獲得了所有瀏覽器的支持,應該說是最優選用屬性。它們的坐標系是計算機屏幕,也就是說,以計算機屏幕左上角為定位原點。這對於以瀏覽器窗口為活動空間的網頁來說,沒有任何價值,因為不同的屏幕分辨率,不同的瀏覽器窗口大小和位置都使在網頁中定位鼠標成為一件很困難的事情。

如果以document對像為坐標系,則可以考慮選用pageX和pageY屬性在瀏覽器窗口中進行定位。這對設計鼠標跟隨來說是一個好主意,因為跟隨元素一般都以絕對定位的方式在瀏覽器窗口中移動,所以只要在mousemove事件處理函數中把pageX和pageY屬性值傳遞給絕對定位元素的top和left樣式屬性即可。

由於clientX和clientY屬性是以window對像為坐標系,並且IE支持它們,因此可以選用它們。不過考慮window等對象可能出現的滾動條偏移量,還應加上相對於window對象的頁面滾動的偏移量。因此可以這樣來設計:


var posX=0,posY=0;

var event=event||window.event;

if(event.pageX||event.pageY){

posX=event.pageX;

posY=event.pageY;

}

else if(event.clientX||event.clientY){

posX=event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;

posY=event.clientY+document.documentElement.scrollTop+document.body.scrollTop;

}


在上面的代碼中,先檢測pageX和pageY屬性是否存在,如果存在,則獲取它們的值;如果不存在,則檢測並獲取clientX和clientY屬性值,然後加上document.documentElement和document.body對象的scrollLeft和scrollTop屬性值,這樣就可以在不同瀏覽器中獲得相同的坐標值。

然後定義一個封裝函數,設計函數傳入參數為對像引用指針、相對鼠標指針的偏移距離,以及事件對象。接著封裝函數能夠根據事件對像獲取鼠標的坐標值,並設置該對像為絕對定位,絕對定位的值為鼠標指針當前的坐標值。具體封裝代碼如下:


var pos=function(o,x,y,event){

var posX=0,posY=0;

var e=event||window.event;

if(e.pageX||e.pageY){

posX=e.pageX;

posY=e.pageY;

}

else if(e.clientX||e.clientY){

posX=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;

posY=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;

}

o.style.position="absolute";

o.style.top=(posY+y)+"px";

o.style.left=(posX+x)+"px";

}


為document對像註冊鼠標移動事件處理函數,並傳入鼠標定位封裝函數,傳入的對象為<p>元素,設置其位置向鼠標指針右下方偏移(10,20)的距離。由於非IE瀏覽器是通過參數形式傳遞事件對象的,所以不要忘記在調用函數中還要傳遞事件對象。代碼如下:


<p>鼠標跟隨</p>

<script language="javascript"type="text/javascript">

var p1=document.getElementById("p1");

document.onmousemove=function(event){

pos(p1,10,20,event);

}

</script>