javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象。
我们通过监听document的mousemove,就可以实时获得鼠标位置。
但是!!event中和鼠标相关的属性太多了,很让人头大!如下:
event.layerXevent.layerYevent.clientXevent.clientYevent.pageXevent.pageYevent.offsetXevent.offsetYevent.screenXevent.screenYevent.xevent.y
共计6组!
而且他们的区别并不明显,各浏览器间还不兼容!
这篇文章的目的就是搞清楚他们的区别,以及选出那些不推荐使用的。
测试代码
直接运行下列代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html><br />
<head><br />
<meta charset=
"utf-8"
/></p>
<style>
body {position:relative;}
div {min-height: 300px; background-color:
#eee;}
#jg {right: 0; top: 10px; position: fixed; background-color: #f00;}
</style>
<p></head><br />
<body><br />
<span id=
"jg"
>显示结果</span><br />
<input type=
"button"
value=
"一个按钮"
/></p>
<div>屏内div</div>
<div style=
"height:1000px; width:2000px; background:#ddd;"
>很高很宽。。。</div>
<div>屏外DIV</div>
<p></body><br />
<script>
var
jg = document.getElementById(
'jg'
);
document.onmousemove =
function
(e) {
e = e || window.event;
jg.innerHTML =
'layerX:'
+e.layerX+
',layerY:'
+e.layerY+
', <br/>clientX:'
+e.clientX+
',clientY:'
+e.clientY+
', <br/>pageX:'
+e.pageX+
',pageY :'
+e.pageY+
',<br/>offsetX:'
+e.offsetX+
',offsetY:'
+e.offsetY+
',<br/>screenX:'
+e.screenX+
',screenY:'
+e.screenY+
',<br/>x:'
+e.x+
',y:'
+e.y;
}
</script><br />
</html>
|
测试过程中发现一个神器:chrome(谷歌浏览器)和IE9全兼容以上所有属性!用来比较他们就非常方便了。
经过对比,结果如下:
各属性释义
clientX与Y,是鼠标相对于浏览器视口(即滚动条之外的部分忽略掉)的坐标;所有浏览器都支持。
screenX与Y,是鼠标相对于整个屏幕左边(顶边)的坐标,基本与document脱节了;全兼容。
offsetX与Y,是鼠标相对于当前所指向对象的坐标,鼠标此时指向按钮,则offsetX是相对于这个按钮;firefox不支持
x与y,同标准浏览器的layerX与Y,是IE中可以用来代替layerX的属性
pageX与Y,是鼠标相对于整个页面左边(顶边)的坐标,包括视口之外的;IE7,8不支持。
重点:layerX与layerY
layerX与Y是标准浏览器出的新属性,IE9也支持。他可以用来代替offsetX与Y.但是,他的定义为:相对于当前指向元素最近的有定位信息的元素的坐标。这个“有定位”是指有非默认定位的css属性(即非static)。
如果,当前指向的元素就有定位,那么layerX与Y就返回相对于此元素的坐标;否则,就查看此元素的父标签;还是没有定位的话,就继续;一直到根元素——html节点。
所以,在firefox中,想要offsetX值,就必须加入position定位信息!
兼容性总结:
1,firefox不支持offsetX,offsetY与x,y属性,但完全可以用layerX代替他们;
2,ie中的x,y相当于firefox&chrome中的layerX与layerY;
3,ie7,8的document的边界与浏览器窗口的边界有2px的距离,所以在窗口最大化时screenX最小都有2px;
4,ie9中的layerX与Y,虽然有值,但却莫名其妙的不正确,貌似与html标签有关,比如我的例子的代码,把滚动条拖到最右边,鼠标从空白慢慢移动到大DIV上,此时大DIV的最右边与第一个DIV的最右边的差值也会算进layerX中。。。后头元素越来越多,这个计算就越复杂;而firefox与chrome的layerX则没有这个问题。所以,不要在IE9中使用layerX.
5,在chrome中,x与y虽然有值,但是是和clientX与Y完全相同! 所以,不建议使用x,y属性。
兼容性补救
标准浏览器中可以用position与event.layerX配合来实现event.offsetX属性;
IE7,8中没有pageX,pageY,只有用document.documentElement.scrollLeft+event.clientX来求出。
所以,IE中的x,y或者offsetX,offsetY可以去掉一个了。
本文链接: javascript:与获取鼠标位置有关的属性.转载请保留.