JavaScript 獲取鼠標(biāo)指針相對(duì)位置

■知識(shí)點(diǎn)

使用offsetX和offsetY屬性可以實(shí)現(xiàn)這樣的目標(biāo)，但是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屬性是以絕對(duì)定位的父元素為參照物而不是元素自身。如果沒有絕對(duì)定位的父元素，則會(huì)以document對(duì)象為參照物。為此，可以通過腳本動(dòng)態(tài)添加或者手動(dòng)添加的方式，設(shè)計(jì)在元素的外層包圍一個(gè)絕對(duì)定位的父元素，這樣可以解決瀏覽器兼容問題?？紤]到元素之間的距離所造成的誤差，可以適當(dāng)減去1個(gè)或幾個(gè)像素的偏移量。

■實(shí)例設(shè)計(jì) 

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

<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;      //標(biāo)準(zhǔn)化事件對(duì)象

    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)部定位鼠標(biāo)指針的問題，但是由于在元素外面包裹了一個(gè)絕對(duì)定位的元 素，會(huì)破壞整個(gè)頁面的結(jié)構(gòu)布局。在確保這種人為方式不會(huì)導(dǎo)致結(jié)構(gòu)布局混亂的前提下，可以考慮選用這種方法。