在前端开发中，我们常常需要获取用户在页面上点击或鼠标移动的位置。而 Javascript 中提供了四个跟位置相关的属性：pageX/Y、clientX/Y 和 screenX/Y。那么这些属性到底有什么区别呢？本文将为大家一一详细解答。
1. pageX/Y
pageX 和 pageY 属性返回的是相对于整个页面左上角的坐标值。也就是说，无论滚动条有没有滚动，这两个属性的值都是不变的。但需要注意的是，如果当前页面嵌套有 iframe，那么该属性的值会被计算在 iframe 内部的坐标系中。
document.addEventListener('click', function(event) {
console.log(`pageX: ${event.pageX}, pageY: ${event.pageY}`);
});2. clientX/Y
clientX 和 clientY 属性返回的是相对于浏览器窗口客户区域（即视口）左上角的坐标值。此时，滚动条滚动会对这两个属性的值产生影响，因为它们是相对于视口的。同时，当页面存在缩放时，这两个属性的值也会受到缩放比例的影响。
document.addEventListener('click', function(event) {
console.log(`clientX: ${event.clientX}, clientY: ${event.clientY}`);
});3. screenX/Y
screenX 和 screenY 属性返回的是相对于用户的屏幕左上角的坐标值。与前两个属性不同，这两个属性是跟用户的屏幕分辨率相关的，因此在不同设备上的值可能会有所不同。
document.addEventListener('click', function(event) {
console.log(`screenX: ${event.screenX}, screenY: ${event.screenY}`);
});4. offsetX/Y
offsetX 和 offsetY 属性返回的是相对于事件目标元素的坐标值。也就是说，它们表示了鼠标指针位置距离触发事件的元素左上角的水平和垂直距离。当事件没有被绑定到任何元素上时，这两个属性的值为 null。
document.getElementById('myDiv').addEventListener('click', function(event) {
console.log(`offsetX: ${event.offsetX}, offsetY: ${event.offsetY}`);
});综上所述，虽然这些属性都能获取鼠标指针位置信息，但是它们之间还是有很大区别的。开发者需要根据具体需求去选择使用哪个属性，以便更好地提升用户体验。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27885