本文详解 JavaScript 中获取鼠标当前位置的三种坐标体系：客户区坐标（clientX/Y）、页面坐标（pageX/Y）及屏幕坐标（screenX/Y）。重点解析 pageX 在 IE8 及以下版本的兼容处理，通过自定义事件工具类 EventUtil 实现跨浏览器兼容，帮助开发者准确计算鼠标移动或窗口拖动的距离。
JavaScript 鼠标坐标获取概述
在开发过程中，有时需要计算窗口拖动或鼠标移动的位移量，这通常通过计算鼠标在页面中前后位置的变化来实现。下面介绍几种常用的事件属性及其用法：
客户区坐标：clientX 与 clientY
1、客户区坐标位置
鼠标事件的发生位置基于浏览器视口。相关的位置信息存储在事件对象的 clientX 和 clientY 属性中。这两个值表示鼠标指针在视口中的水平和垂直坐标，其计算不包含页面滚动的距离。具体示意如下图所示：
var div = document.getElementById("myDiv"); //获取元素
EventUtil.on(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});注：其中，EventUtil.on() 用于为指定元素绑定事件，EventUtil.getEvent(event) 用于获取标准的事件对象。EventUtil 是一个自定义的事件处理工具类，封装了跨浏览器兼容的方法，具体实现可参考文章《js 实现一些跨浏览器的事件方法详解及实例》。若项目中已使用 jQuery 等库，可替换为对应的事件处理方法。
页面坐标：pageX 与 pageY 及兼容处理
2、页面坐标位置
事件对象还提供了 pageX 和 pageY 属性，用于指示事件在页面中的具体发生位置。这两个属性表示鼠标光标相对于整个页面的坐标，其值等于鼠标在窗口中的坐标加上页面滚动的距离。
var div = document.getElementById("myDiv");//获取id为"myDiv"的元素
EventUtil.on(div, "click", function(event){//为元素绑定click事件
event = EventUtil.getEvent(event);//获取event事件对象
var pageX = event.pageX,pageY = event.pageY;
if (pageX === undefined){//IE8及更早版本
pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if (pageY === undefined){
pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
}
alert("Page coordinates: " + pageX + "," + pageY);
});屏幕坐标：screenX 与 screenY
3、屏幕坐标位置
通过 screenX 和 screenY 属性，可以确定鼠标事件发生时，鼠标指针相对于整个屏幕显示区域的坐标信息。具体示意如下图所示：
var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});
本文内容参考自《JavaScript高级程序设计第三版》
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！