鼠标事件发生时的位置信息小记

　　鼠标事件发生时，相关的位置信息会保存在事件对象中（event）。在开发中，有时候需要用到跟滚轮和鼠标有关的位置属性，所以记录一下，以供之后再用。

　　　　1.客户区坐标位置

　　鼠标事件都是在浏览器视口中特定位置发生的，位置信息保存在事件对象的cilentX,clientY属性中。所有浏览器都支持这个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。简单说来就是，鼠标相对于视口的位置。示例代码如下：

　　　　

　　　　　　　　　　　　　　　　图1  clientX,clientY用法示例

　　　　　　　注：本示例只是为了演示具体属性，没有考虑兼容性

　　　　2.页面坐标位置

　　页面坐标通过事件的pageX,pageY属性，告诉你事件在页面的什么位置发生的。这两个属性表示鼠标光标在页面的位置，坐标是从页面本身而不是视口的 左边和顶边计算的。页面没有滚动的情况下，pageX,pageY 和clientX,clientY的值相等。IE8及更高版本不支持这个属性，可根据client坐标位置和滚动信息计算出来

。计算过程如下：

　　

　　　　　　　　图2  计算发生的事件在页面中的位置

 

　　3.屏幕坐标位置

　　　　相对与整个电脑屏幕的位置。而通过screenX,screenY属性可以确定鼠标事件发生时鼠标指针相对与电脑屏幕的位置。示例如下：

　　

　　　　　　　　　　图3 screenX,screenY 用法示例

　　　　　　注：本示例只是为了演示具体属性，没有考虑兼容性

 

转载于:https://www.cnblogs.com/echo-yaonie/p/4342063.html