鼠标指针 - 标准写法

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

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()函数参照我之前的文章《js获取元素样式属性值 - 较为灵活的函数 》，3为边框默认宽度
 8 
 9 　　　　　　var bt = parseInt(getStyle(o,"borderTopWidth")) || ((o.style.borderTopStyle && o.style.borderTopStyle != "none") ? 3 : 0);
10 
11 　　　　　　var x = e.offsetX || (e.layerX - o.offsetLeft - bl); //一般浏览器下的鼠标位置x坐标
12 
13 　　　　　　var y = e.offsetY || (e.layerY - o.offsetTop - bt); //一般浏览器下的鼠标位置y坐标
14 
15 　　　　　　//判断浏览器是否为Safari，需要减去边框的宽度，因为是以外壁左上角为原点的。
16 
17 　　　　　　var u = navigator.userAgent;
18 
19 　　　　　　if((u.indexOf("KHTML") > -1) || (u.indexOf("Konqueror") > -1)  || (u.indexOf("AppleWebKit") > -1) ){
20 
21 　　　　　　　　x -= bl;
22 
23 　　　　　　　　y -= bt;
24 
25 　　　　　　}
26 
27 　　　　　　return {
28 
29 　　　　　　　　x : x;
30 
31 　　　　　　　　y : y;
32 
33 　　　　　　}
34 
35 }