jquery中clientY，pageY和screenY的区别 最后三张图一目了然。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery获取坐标</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
* {margin: 0;padding: 0;}
div p {
display: inline-block;box-sizing: border-box;
}
</style>
</head>
<body style="height:1200px;">
<div style="width:100%;position: fixed;top: 0;background: #000;color: white;padding: 2px 20px;">
<p>鼠标当前的屏幕坐标是：<span class="showCoordinate">x:0,y:0</span></p>
<p>鼠标当前窗口客户区的坐标是：<span class="showCusCoord">x2:0,y2:0</span></p>
<p>鼠标在窗口页面中的坐标是：<span class="showPageCoord">x3:0,y3:0</span></p>
</div>
<script src="../jquery1.js"></script>
<script>
$(document).ready(function(){
$(document).mousemove(function(e){
//获取鼠标在屏幕上的坐标
x=e.screenX;//屏幕的左上角为参考点
y=e.screenY;//获取屏幕的x和y坐标
$(".showCoordinate").text("screenX:"+x+",screenY:"+y);
//获取鼠标在当前窗口区域中的坐标
x2=e.clientX;
y2=e.clientY;
$(".showCusCoord").text("clientX:"+x2+",clientY:"+y2);
//返回事件被触发时鼠标指针相对于文档左边缘的位置
x3=e.pageX;
y3=e.pageY;(会随着滚动条的变化而变化)
$(".showPageCoord").text("pageX:"+x3+",pageY:"+y3);
});
});
</script>
</body>
</html>
screenX,screenY是距离屏幕边缘的距离
clientX,clientY是距离当前可是窗口的距离
pageX,pageY是相对于当前页面中的坐标（会随着滚动条的滚动而变化）
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通