鼠标指针 - 标准写法

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

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 }

你可能感兴趣的:(指针)