讀古今文學網 > 編寫高質量代碼:改善JavaScript程序的188個建議 > 建議126:小心在元素內定位鼠標指針 >

建議126:小心在元素內定位鼠標指針

要獲取鼠標指針在元素內的坐標,目前還沒有更穩妥的解決方案。使用offsetX和offsetY屬性可以獲取鼠標指針在元素內的坐標,但Firefox瀏覽器對此並不支持。不過可以選用layerX和layerY屬性來兼容Firefox瀏覽器。代碼如下:


var event=event||window.event;

if(event.offsetX||event.offsetY){

x=event.offsetX;

y=event.offsetY;

}

else if(event.layerX||event.layerY){

x=event.layerX;

y=event.layerY;

}


但是,layerX和layerY屬性以絕對定位的父元素為參照物,而不是以元素自身為參照物,因此,如果沒有絕對定位的父元素,則以document對像為參照物。為此,我們可以通過腳本動態添加或手動添加的方式來設計在元素的外層包圍一個絕對定位的父元素,從而解決瀏覽器兼容問題。考慮到元素之間的距離所造成的誤差,可以適當減去一個或幾個像素的偏移量。例如:


<input type="text"id="text"/>

<span >

<p>鼠標跟隨</p>

</span>

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

var t=document.getElementById("text");

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

p1.onmousemove=function(event){

var event=event||window.event;

if(event.offsetX||event.offsetY){

t.value=event.offsetX+""+event.offsetY;

}

else if(event.layerX||event.layerY){

t.value=(event.layerX-1)+""+(event.layerY-1);

}

}


這種做法能夠解決在元素內部定位鼠標指針的問題,但在元素外面包裹一個絕對定位的元素會破壞整個頁面的結構佈局。在確保這種人為方式不會導致結構佈局混亂的前提下,可以考慮選用這種方法,否則不建議使用這種方法。

由於瀏覽器的不兼容性,鼠標定位一直是一個難題。在JavaScript程序開發中,應該避免將鼠標定位作為事件觸發的條件。例如,當鼠標經過某個元素時,不應該通過計算鼠標指針的坐標是否位於元素內部來觸發事件,而應該通過元素的mouseover事件類型進行觸發,或者通過焦點事件進行控制。