鼠标指针 - 标准写法

平时在写一些交互效果的时候，经常会用到鼠标指针所在的坐标位置。由于浏览器的不同，解析的方式不同，经常会出现计算上的差异。下面列出标准的、兼容性比较好的写法。

1.指针在页面中的坐标位置

属性选择：pageX、pageY - DOM标准

　　　　　clientX、clientY - 诡异IE

　　　　　document.documentElement - DOM标准

　　　　　document.body - 诡异IE

函数：

function getP(e){

　　　　　　var e = e || window.event;

　　　　　　return {

　　　　　　　　x : e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft),

　　　　　　　　y : e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)

　　　　　　}

　　　}

 

2.指针在元素中的坐标位置

属性选择：offsetX、offsetY - (Safari以元素边框外壁左上角为原点，其他浏览器以内壁左上角为原点;Mozilla不支持)

　　　　　layerX、layerY - 兼容Mozilla,以元素包含块为参照对象，而不是元素自身左上角，需减去offsetLeft、offsetTop

函数：

function getEP(e,o){

　　　　　　var e = e || window.event;

　　　　　　var bl = parseInt(getStyle(o,"borderLeftWidth")) || ((o.style.borderLeftStyle && o.style.borderLeftStyle != "none") ? 3 : 0);

　　　　　　//这里的getStyle()函数参照我之前的文章《js获取元素样式属性值 - 较为灵活的函数 》，3为边框默认宽度

　　　　　　var bt = parseInt(getStyle(o,"borderTopWidth")) || ((o.style.borderTopStyle && o.style.borderTopStyle != "none") ? 3 : 0);

　　　　　　var x = e.offsetX || (e.layerX - o.offsetLeft - bl); //一般浏览器下的鼠标位置x坐标

　　　　　　var y = e.offsetY || (e.layerY - o.offsetTop - bt); //一般浏览器下的鼠标位置y坐标

　　　　　　//判断浏览器是否为Safari，需要减去边框的宽度，因为是以外壁左上角为原点的。

　　　　　　var u = navigator.userAgent;

　　　　　　if((u.indexOf("KHTML") > -1) || (u.indexOf("Konqueror") > -1)  || (u.indexOf("AppleWebKit") > -1) ){

　　　　　　　　x -= bl;

　　　　　　　　y -= bt;

　　　　　　}

　　　　　　return {

　　　　　　　　x : x;

　　　　　　　　y : y;

　　　　　　}

}