JQuery开发5-在网页中获取鼠标的三种坐标

在开发过程中。有时候会获取鼠标当前的坐标，主要分为三种，第一种是获取鼠标在屏幕中的坐标，第二种是获取鼠标在客户区中的坐标，第三种是获取鼠标在窗口页面中的坐标。

分别用的方法名称为screenX和screenY，clientX和clientY，pageX和pageY。

属性说明

• clientX/clientY

  名称	说明	返回
  clientX	返回事件触发时鼠标相对于元素视口 的X坐标	数值
  clientY	返回事件触发时鼠标相对于元素视口 的Y坐标	数值

  这里的元素视口实际上代指就是浏览器，clientX是鼠标距离浏览器左边框的距离，clientY是鼠标距离浏览器上边框的距离。当鼠标停留在页面某个位置时，滚动鼠标滚动条，坐标会随着鼠标滚动条的改变而改变。

• screenX/screenY

  名称	说明	返回
  screenX	返回事件触发时鼠标相对于屏幕 的X坐标	数值
  screenY	返回事件触发时鼠标相对于屏幕 的Y坐标	数值

  顾名思义，screenX是鼠标距离显示器屏幕左边框的距离，screenY是鼠标距离显示器屏幕上边框的距离。

• pageX/pageY

  名称	说明	返回
  pageX	返回事件触发时鼠标相对于文档 的X坐标	数值
  pageY	返回事件触发时鼠标相对于文档 的Y坐标	数值

   

  如果鼠标停留在网页中的某个位置，滚动鼠标滚动条，pageY不会因为鼠标滚动的滚动而改变。

• 参考代码如下

• <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  
  
  
  
  
  
  
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  	
  
  		鼠标当前屏幕的坐标为：
  	
  	
  
  		鼠标当前窗口客户区坐标为：
  	
  	
  
  		鼠标当前页面区域中的坐标为：
  	
  	
  test
  	
  test
  	
  test
  	
  test
  	
  test
  	
  test
  	
  test
  	
  test
  	
  test
  	
  test
  	
  test