JavaScript 获取鼠标指针相对位置

■知识点

使用offsetX和offsetY属性可以实现这样的目标，但是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对象为参照物。为此，可以通过脚本动态添加或者手动添加的方式，设计在元素的外层包围一个绝对定位的父元素，这样可以解决浏览器兼容问题。考虑到元素之间的距离所造成的误差，可以适当减去1个或几个像素的偏移量。

■实例设计 

实例设计代码如下：

<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);

    }

}

■小结

    这种做法能够解决在元素内部定位鼠标指针的问题，但是由于在元素外面包裹了一个绝对定位的元 素，会破坏整个页面的结构布局。在确保这种人为方式不会导致结构布局混乱的前提下，可以考虑选用这种方法。