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程序设计有所帮助。