JavaScript 獲取鼠標指針相對位置

■知識點

使用offsetX和offsetY屬性可以實現(xiàn)這樣的目標，但是Mozilla瀏覽器不支持。不過可以選用layerX和layerY屬性來兼容Mozilla瀏覽器。

var event = event || window.event;

if (event.offsetX || event.offsetY ){       //適用非Mozilla瀏覽器

    x = event.offsetX;

    y = event.offsetY;

}

else if (event.layerX || event.layerY ){    //兼容Mozilla瀏覽器

    x = event.layerX;

    y = event.layerY;

}

    layerX和layerY屬性是以絕對定位的父元素為參照物而不是元素自身。如果沒有絕對定位的父元素，則會以document對象為參照物。為此，可以通過腳本動態(tài)添加或者手動添加的方式，設(shè)計在元素的外層包圍一個絕對定位的父元素，這樣可以解決瀏覽器兼容問題。考慮到元素之間的距離所造成的誤差，可以適當減去1個或幾個像素的偏移量。

■實例設(shè)計 

實例設(shè)計代碼如下：

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

<span style="position:absolute;">

    <div id="divl" style="width:200px;height:160px;border:solid 1px red;"></div>

</span>

<script〉

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

var divl = document.getElementByld("divl"); 

divl.onmousemove = function(event){

    var event = event | | window.event;      //標準化事件對象

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

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

    }

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

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

    }

}

■小結(jié)

    這種做法能夠解決在元素內(nèi)部定位鼠標指針的問題，但是由于在元素外面包裹了一個絕對定位的元 素，會破壞整個頁面的結(jié)構(gòu)布局。在確保這種人為方式不會導(dǎo)致結(jié)構(gòu)布局混亂的前提下，可以考慮選用這種方法。