用
javascript
获取当页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip)
等等。当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同,本文详细介绍了浏览器在处理这些属性时的差异和最终的解决方法。
查看示例
Javascript:
使用方式:
Code:
document.onmousemove =
mouseMove;
function mouseMove(ev){
ev
=
ev
||
window.event;
var
mousePos
=
mousePosition(ev);
}
关于代码的详细说明,原文中已经介绍,现转到此处:
我们首先要声明一个
evnet
对象,无论移动、点击、按键等,都会激活一个
evnet
,在
Internet
Explorer
里,
event
是全局变量,会被存储在
window.event
里.
在
firefox
或者其他浏览器,event
会被相应的函数获取.当我们将mouseMove函数赋值于document.onmousemove,mouseMove
会获取鼠标移动事件。
为了让 ev
在所有浏览器下获取了
event
事件,在Firefox下"||window.event"将不起作用,因为ev已经有了赋值。在
MSIE
中
ev
为空,所以得到
window.event
。
因为在这篇文章中我们需要多次获取鼠标位置,所以我们设计了一个 mousePosition
函数,它包含一个参数
:
event
。
因为我们要在 MSIE
和其他浏览器下运行,Firefox
和其他浏览器用
event.pageX
和
event.pageY
来表示鼠标相对于文档的位置,如果你有一个
500*500
的窗口并且你的鼠标在绝对中间,那么
pageX
和
pageY
的值都是
250,如果你向下滚动
500,
那么
pageY
将变成
750。
MSIE 正好相反,它使用
event.clientX
和
event.clientY
表示鼠标相当于窗口的位置,而不是文档。在同样的例子中,如果你向下滚动500,clientY
依然是
250,因此,我们需要添加
scrollLeft
和
scrollTop
这两个相对于文档的属性。最后,MSIE
中文档并不是从
0,0
开始,而是通常有一个小的边框(通常是
2
象素),边框的大小定义在
document.body.clientLeft
和
clientTop
中,我们也把这些加进去。
完成代码:
<script type="text/javascript">
// 说明:获取鼠标位置
// 整理:http://www.codebit.cn
// 来源:http://www.webreference.com
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop
- document.body.clientTop
};
}
document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementByIdx('mouseXPosition').value = mousePos.x;
document.getElementByIdx('mouseYPosition').value = mousePos.y;
}
</script>
查看示例
Javascript:
-
-
<script type= "text/javascript">
-
-
// 说明:获取鼠标位置
-
// 整理:http://www.codebit.cn
-
// 来源:http://www.webreference.com
-
-
function mousePosition (ev ) {
-
if (ev. pageX || ev. pageY ) {
-
return {x:ev. pageX, y:ev. pageY };
-
}
-
return {
-
x:ev. clientX + document. body. scrollLeft - document. body. clientLeft,
-
y:ev. clientY + document. body. scrollTop - document. body. clientTop
-
};
-
}
-
-
</script>
使用方式:
Code:
document.onmousemove
function
}
我们首先要声明一个
为了让
因为在这篇文章中我们需要多次获取鼠标位置,所以我们设计了一个
因为我们要在
MSIE
完成代码:
<script type="text/javascript">
// 说明:获取鼠标位置
// 整理:http://www.codebit.cn
// 来源:http://www.webreference.com
function mousePosition(ev){
}
document.onmousemove = mouseMove;
function mouseMove(ev){
}
</script>
------------jquery 方式---------
<script type="text/javascript">
$(document).mousemove(function(e) {
var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
$("#testDiv").text(xx + '---' + yy);
});
</script>
$(document).mousemove(function(e) {
var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
$("#testDiv").text(xx + '---' + yy);
});
</script>