如何用jQuery获取相对于当前屏幕/窗口的鼠标坐标（非整页）

没问题，我来帮你理清这个问题——其实关键是要分清几个不同的坐标属性，jQuery的事件对象里已经提供了对应的取值，不用额外折腾。

首先先明确几个核心属性的区别，避免搞混：

• event.pageX/event.pageY：这就是你之前用的，是相对于**整个文档（包括滚动出视口的部分）**的坐标，所以当页面很长滚动后，值会变大。
• event.clientX/event.clientY：相对于**当前浏览器视口（窗口可见区域）**的坐标，滚动页面时这个值不会跟着变，只会在你移动鼠标在窗口内的位置时变化。
• event.screenX/event.screenY：相对于用户的物理屏幕的坐标，这个是和浏览器窗口位置无关的，只看鼠标在显示器上的位置。

针对你的需求：获取鼠标到屏幕底部的距离 #

你需要用屏幕的总高度减去鼠标相对于屏幕的Y坐标，代码示例如下：

// 绑定鼠标移动事件
$(document).on('mousemove', function(event) {
    // 鼠标相对于物理屏幕的Y坐标
    const mouseScreenY = event.screenY;
    // 获取物理屏幕的总高度
    const totalScreenHeight = window.screen.height;
    // 计算到屏幕底部的距离
    const distanceToScreenBottom = totalScreenHeight - mouseScreenY;
    
    // 可以打印出来验证
    console.log(`鼠标到屏幕底部的距离：${distanceToScreenBottom}px`);
});

额外补充：如果是要到浏览器窗口（视口）底部的距离 #

如果你其实是想获取相对于浏览器可见窗口底部的距离（毕竟有时候用户可能混淆屏幕和窗口），可以用下面的代码：

$(document).on('mousemove', function(event) {
    // 鼠标相对于浏览器视口的Y坐标
    const mouseClientY = event.clientY;
    // 获取浏览器视口的高度（不包括滚动的部分）
    const windowHeight = $(window).height();
    // 计算到窗口底部的距离
    const distanceToWindowBottom = windowHeight - mouseClientY;
    
    console.log(`鼠标到窗口底部的距离：${distanceToWindowBottom}px`);
});

测试一下就知道，当你滚动页面时，distanceToWindowBottom会根据鼠标在窗口内的位置变化，而distanceToScreenBottom只和鼠标在显示器上的位置有关。

内容的提问来源于stack exchange，提问作者Vishal Suthar