js获取鼠标位置实例详解
本文实例讲述了js获取鼠标位置的方法。分享给大家供大家参考，具体如下：
用javascript获取当前页面上鼠标（光标）位置在许多情况下都会用到，比如拖放，悬停提示（tooltip）等等。当然，这里我们依然要面对浏览器的兼容问题，在不同的浏览器下，对这些相关的属性处理方式也不同，这里详细介绍了浏览器在处理这些属性时的差异和最终的解决方法。
Javascript代码如下:
<scripttype="text/javascript">
//说明：获取鼠标位置
//整理：http://www.codebit.cn
//来源：http://www.webreference.com
functionmousePosition(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>
使用方式：
document.onmousemove=mouseMove;
functionmouseMove(ev){
ev=ev||window.event;
varmousePos=mousePosition(ev);
}
关于代码的详细说明如下：
我们首先要声明一个evnet对象，无论移动、点击、按键等，都会激活一个evnet，在InternetExplorer里，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中，我们也把这些加进去。
完成代码：
<scripttype="text/javascript">
//说明：获取鼠标位置
//整理：http://www.codebit.cn
//来源：http://www.webreference.com
functionmousePosition(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;
functionmouseMove(ev){
ev=ev||window.event;
varmousePos=mousePosition(ev);
document.getElementByIdx('mouseXPosition').value=mousePos.x;
document.getElementByIdx('mouseYPosition').value=mousePos.y;
}
</script>
希望本文所述对大家JavaScript程序设计有所帮助。