js实现获取鼠标的当前位置

有时候，我们需要得到窗口拖动或鼠标移动的距离。这时，我们可以通过计算鼠标在页面前后的位置来得到想要的结果。这里有一些事件属性：

1.客户区域的坐标位置

鼠标事件发生在浏览器视口中的特定位置。该位置信息保存在事件对象的clientX和clientY属性中。它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标(不包括页面滚动的距离)。如下图所示：

var div=document . getelementbyid(' myDiv ')；//获取元素eventutil.on (div，' click '，function(event){ event=event util . getevent(event)；alert(' Screen coordinates 3360 ' event . screenx '，' event . screeny ')；});注意：EventUtil.on()表示元素绑定事件，Eventul。getEvent(事件)表示获取事件对象。EventUtil是一个自定义事件对象(由JavaScript实现)，其中包含一些跨浏览器的方法。具体实现请参见另一篇文章《js 实现一些跨浏览器的事件方法详解及实例》。如果项目中使用了jQuery插件，可以用相应的方法替换。

2.页面坐标位置

事件对象属性pageX和pageY可以告诉您事件在页面上的发生位置。换句话说，这两个属性表示鼠标光标在页面中的位置(相当于鼠标在窗口中的位置和页面滚动的距离)。

var div=document . getelementbyid(' myDiv ')；//获取id为' myDiv' (div，' click ')的元素eventutil.on，函数(event){//绑定元素的click事件event=event util . getevent(event)；//get event对象varpagex=event.pagex，pagey=event.pageyIf (pageX===未定义){//IE8及更早版本PageX=event . client x(document . body . scroll left | | document . document element . scroll left)；} if (pageY===未定义){ PageY=event . clienty(document . body . scroll top | | document . document element . scroll top)；}警报(' Page coordinates: ' pageX '，' PageY ')；});3.屏幕坐标位置

通过screenX和screenY属性，可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。如下图所示：

var div=document . getelementbyid(' myDiv ')；EventUtil.on(div，' click '，function(event){ event=event util . getevent(event)；alert(' Screen coordinates 3360 ' event . screenx '，' event . screeny ')；});来自《JavaScript高级程序设计第三版》的文章参考

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！