本文详细解析 JavaScript 中的鼠标事件 MouseEvent 对象，重点介绍 offsetX、offsetY、clientX、pageX 等常用坐标属性，并通过控制台打印示例展示如何获取鼠标位置及按键状态，帮助开发者准确处理前端交互。
鼠标事件-MouseEvent
当用户执行鼠标操作时，浏览器会生成一个 event 对象，该对象记录了触发事件时的各项属性信息。
可以通过在 Google 浏览器控制台中执行特定代码来打印出 MouseEvent 对象实例。
function mouseDown(e){
var e = e||event;
console.log(e)
}
window.onload = function (){
document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)
}控制台输出的 MouseEvent 对象结构如下所示：
该对象包含众多属性，但在实际开发中最常使用的包括 offsetX、offsetY、clientX/clientY 以及 pageX、pageY。这些属性分别代表不同的坐标参照系，具体含义如下所述。
以下是几种常见的鼠标事件类型及其说明。
altKey：该属性用于判断触发鼠标事件时是否按下了 Alt 键。如果按下，返回 true；否则返回 false。
button：该属性返回一个阿拉伯数字，用于标识按下的鼠标按键。其中 0 代表按下左键，1 代表按下滚轮键，2 代表按下右键。
offsetX、offsetY：这两个属性返回触发事件时，鼠标指针相对于事件源元素（即绑定事件的 DOM 元素）左上角的 X 和 Y 坐标。需要注意的是，标准事件模型中可能没有直接对应的属性，需通过计算获取。
clientX、clientY：这两个属性返回触发事件时，鼠标指针相对于浏览器页面可视区域（即客户区 viewport）左上角的水平坐标和垂直坐标。
pageX、pageY：这两个属性返回触发事件时，鼠标指针相对于整个页面（包括滚动部分）左上角的水平坐标和垂直坐标。
screenX、screenY：这两个属性返回触发事件时，鼠标指针相对于用户屏幕左上角的水平坐标和垂直坐标，此时参照原点为屏幕的左上角。
为了更直观地理解上述坐标差异，以下提供一张经典示意图进行解释。
至此，关于 JavaScript 鼠标事件 (MouseEvent) 的案例讲解已完成。如需了解更多相关内容，请搜索本站历史文章或继续阅读后续文章，感谢大家的支持！