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

疯不觉

浏览: 7062 次
性别:

最近访客更多访客>>

shirliey

liangzfweb

_如今的她

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

jquery分类

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

分别用的方法名称为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不会因为鼠标滚动的滚动而改变。
参考代码如下
Java代码
1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3. <html>
4. <head>
5. <script language="javascript"
6. src="${pageContext.request.contextPath}/script/jquery.js"></script>
7. <script type="text/javascript">
8. $(document).ready(function() {
9. $(document).mousemove(function(e) {
10. getScreenCoordinates(e);//获取鼠标在屏幕中的坐标
11. getClientCoordinates(e);//获取鼠标在窗口客户区中的坐标，会随着滚动条的滚动而变化
12. getPageCoordinates(e);//获取鼠标当前页面区域中的坐标，不会随滚动条滚动而变化
13. });
14. function getScreenCoordinates(e) {
15. x1 = e.screenX;
16. y1 = e.screenY;
17. $(".sp1").text("X1:" + x1 + ",Y1:" + y1);
18. }
19. function getClientCoordinates(e) {
20. x2 = e.clientX;
21. y2 = e.clientY;
22. $(".sp2").text("X2:" + x2 + ",Y2:" + y2);
23. }
24. function getPageCoordinates(e) {
25. x3 = e.pageX;
26. y3 = e.pageY;
27. $(".sp3").text("X3:" + x3 + ",Y3:" + y3);
28. }
29. });
30. </script>
31. </head>
32. <body>
33. test
34. test
35. test
36. test
37. test
38. test
39. test
40. test
41. test
42. test
43. test
44. 
45. 鼠标当前屏幕的坐标为：
46. 
47. 
48. 鼠标当前窗口客户区坐标为：
49. 
50. 
51. 鼠标当前页面区域中的坐标为：
52. 
53. test
54. test
55. test
56. test
57. test
58. test
59. test
60. test
61. test
62. test
63. test
64. </body>
65. </html>