鼠标指针 - 标准写法

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

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

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

　　　　　clientX、clientY - 诡异IE

　　　　　document.documentElement - DOM标准

　　　　　document.body - 诡异IE

函数：

 1 function getP(e){
 2 
 3 　　　　　　var e = e || window.event;
 4 
 5 　　　　　　return {
 6 
 7 　　　　　　　　x : e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft),
 8 
 9 　　　　　　　　y : e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)
10 
11 　　　　　　}
12 
13 　　　}

 

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

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

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

函数：

 1 function getEP(e,o){
 2 
 3 　　　　　　var e = e || window.event;
 4 
 5 　　　　　　var bl = parseInt(getStyle(o,"borderLeftWidth")) || ((o.style.borderLeftStyle && o.style.borderLeftStyle != "none") ? 3 : 0);
 6 
 7 　　　　　　//这里的getStyle()函数参照我之前的文章《}