当事件发生时，获取鼠标指针的位置是很重要的事件。这原本是一个很简单的问题，但是由于浏览器的不兼容性，给开发带来了挑战。不同浏览器分别在各自事件对象中定义了不同的属性，详见下方图表。
| 属性 | 说明 | 兼容性 |
| clientX | 以浏览器窗口左上顶角为原点，定位X轴坐标 | 所有浏览器，不兼容Safari |
| clientY | 以浏览器窗口左上顶角为原点，定位Y轴坐标 | 所有浏览器，不兼容Safari |
| offsetX | 以当前事件的目标对象左上顶角为原点，定位X轴坐标 | 所有浏览器，不兼容Mozilla |
| offsetY | 以当前事件的目标对象左上顶角为原点，定位Y轴坐标 | 所有浏览器，不兼容Mozilla |
| pageX | 以document对象（即文档窗口）左上顶角为原点，定位X轴坐标 | 所有浏览器，不兼容IE |
| pageY | 以document对象（即文档窗口）左上顶角为原点，定位Y轴坐标 | 所有浏览器，不兼容IE |
| screenX | 计算机屏幕左上角为原点，定位X轴坐标 | 所有浏览器 |
| screenY | 计算机屏幕左上角为原点，定位Y轴坐标 | 所有浏览器 |
| layerX | 最近的绝对定位的父元素（如果没有，则为document对象）左上顶角为原点，定位X轴坐标 | Mozilla 和 Safari |
| layerY | 最近的绝对定位的父元素（如果没有，则为document对象）左上顶角为原点，定位Y轴坐标 | Mozilla 和 Safari |
兼容不同浏览器的鼠标定位设计方案：
function getMousePos(event){ var posX = 0,posY = 0; //定义坐标变量初始化 var event = event || window.event; //标准化事件对象 if(event.pageX || event.pageY){ //如果浏览器支持该属性，则采用 posX = event.pageX; posY = event.pageY; }else if(event.clientX || event.clientY){ //否则，如果浏览器支持该属性，则采用 posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop; }; return { posX : posX, posY : posY }; }
HTML页面调用方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兼容不同浏览器的鼠标定位方法</title> <script src="js/mousePos.js"></script> <script> document.onmousemove = function(event){ console.log('鼠标X轴坐标值：' + getMousePos(event).posX + '鼠标Y轴坐标值：' + getMousePos(event).posY); } </script> </head> <body> <p>兼容不同浏览器的鼠标定位方法</p> </body> </html>