在开发过程中。有时候会获取鼠标当前的坐标，主要分为三种，第一种是获取鼠标在屏幕中的坐标，第二种是获取鼠标在客户区中的坐标，第三种是获取鼠标在窗口页面中的坐标。
分别用的方法名称为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"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(document).mousemove(function(e) { getScreenCoordinates(e);//获取鼠标在屏幕中的坐标 getClientCoordinates(e);//获取鼠标在窗口客户区中的坐标，会随着滚动条的滚动而变化 getPageCoordinates(e);//获取鼠标当前页面区域中的坐标，不会随滚动条滚动而变化 }); function getScreenCoordinates(e) { x1 = e.screenX; y1 = e.screenY; $(".sp1").text("X1:" + x1 + ",Y1:" + y1); } function getClientCoordinates(e) { x2 = e.clientX; y2 = e.clientY; $(".sp2").text("X2:" + x2 + ",Y2:" + y2); } function getPageCoordinates(e) { x3 = e.pageX; y3 = e.pageY; $(".sp3").text("X3:" + x3 + ",Y3:" + y3); } }); </script> </head> <body> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p> 鼠标当前屏幕的坐标为：<span class="sp1"></span> </p> <p> 鼠标当前窗口客户区坐标为：<span class="sp2"></span> </p> <p> 鼠标当前页面区域中的坐标为：<span class="sp3"></span> </p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </body> </html>
3951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
