JS（clientX/Y、screenX/Y、pageX/Y、offsetX/Y、layerX/Y、x/y） JS

Event对象 Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
Event对象只在事件发生的过程中才有效。
浏览器兼容性 FF：没有window.event对象。可以通过给函数的参数传递event对象。
示例代码：

鬼眼邪神的博客

clientX clientX事件属性返回当事件被触发时鼠标指针相对于浏览器窗口（有效显示区域，不含滚动条）的水平坐标。
clientY clientY事件属性返回当事件被触发时鼠标指针相对于浏览器窗口（有效显示区域，不含滚动条）的垂直坐标。
测试clientX、clientY及其它事件属性用到的代码：

鬼眼邪神的博客 *{ margin:0; padding:0; } body { margin:0 0 0 100px; width:200px; height:800px; border:5px solid #000; background:yellow; } .green { position:relative; margin:50px auto; padding:20px; width:80px; height:80px; border:10px solid #000; background:rgb(0,255,0); } .red { width:1px; height:1px; background:rgb(255,0,0); } .con { width:200px; height:100px; }

下图中显示了页面滚动前后用鼠标点击绿色块上的红点时clientX和clientY。

JS（clientX/Y、screenX/Y、pageX/Y、offsetX/Y、layerX/Y、x/y）

文章图片

文章图片

浏览器兼容性各浏览器都支持。在IE7中，clientX和clientY的计算起点不是浏览器窗口的有效显示区域，而是包括了有效显示区域边缘的2px的边框。
下图中的红色方框所在的位置是clientX和clientY的计算起点，而黄色的部分是浏览器窗口的有效显示区域。

文章图片

screenX screenX事件属性返回事件发生时鼠标指针相对于屏幕的水平坐标。
screenY screenY事件属性返回事件发生时鼠标指针相对于屏幕的垂直坐标。
浏览器兼容性所有的浏览器都支持，并且解释都一样。
pageX pageX事件属性返回事件发生时鼠标指针相对于页面的水平坐标。不随页面滚动而发生变化。
pageY pageY事件属性返回事件发生时鼠标指针相对于页面的垂直坐标。不随页面滚动而发生变化。
浏览器兼容性只有IE不支持。解决方法是pageX/Y=clientX/Y+（页面滚去的宽度/高度）。
知识扩展对于获取页面滚动条滚动的高度，除IE外的浏览器可以通过window对象的pageXOffset/pageYOffset属性来获取。对于IE来说就比较麻烦一点，它依赖当前文档类型。文档类型分为Standards Mode和Quirks Mode，页面声明了DOCTYPE时为Standards Mode，反之为Quirks Mode。可以使用document.compatMode来获取，该方法也同时支持其它浏览器，其返回值为BackCompat或CSS1Compat。
当文档类型为Standards Mode，获取方式为：document.documentElement.scrollTop；而Quirks Mode时则为：document.body.scrollTop。
示例代码：

function scrollLeft(){ if ('pageXOffset' in window) { return window.pageXOffset; } else if (document.compatMode === "BackCompat") { return document.body.scrollLeft; } else { return document.documentElement.scrollLeft; } }

offsetX offsetX事件属性返回发生事件的地点在事件源元素的坐标系统中的x坐标。
offsetY offsetY事件属性返回发生事件的地点在事件源元素的坐标系统中的y坐标。
浏览器兼容性

在Chrome、Safari、Opera中，事件源元素的坐标系统从border-box开始
在IE中，事件源元素的坐标系统从content-box开始。如果鼠标指针在border上，则会出现负值。
FireFox不支持。
在IE7中，页面的坐标系统也包括了浏览器窗口的有效显示区域边缘的2px的灰色边框，但是起点还是和其它浏览器一样，即页面左上角（不包括灰色边框）。如果点击灰色边框，则会出现负值。

layerX layerX事件属性返回鼠标相比较于当前坐标系的x坐标，即如果触发元素没有定位属性，以页面为参考点。如果有，将改变参考坐标系，以触发元素的border-box的左上角为参考点。
layerY layerY事件属性返回鼠标相比较于当前坐标系的y坐标，即如果触发元素没有定位属性，以页面为参考点。如果有，将改变参考坐标系，以触发元素的border-box的左上角为参考点。
浏览器兼容性只有IE不支持。
x x事件属性返回鼠标相比较于当前坐标系的x坐标。
y 【JS（clientX/Y、screenX/Y、pageX/Y、offsetX/Y、layerX/Y、x/y）】y事件属性返回鼠标相比较于当前坐标系的y坐标。
浏览器兼容性

FireFox不支持。
在Chrome、Safari、Opera中，始终以页面为参考系。
在IE中，如果触发元素没有定位属性，以页面为参考点；如果有，将改变参考坐标系，以触发元素的border区域的左上角为参考点。
在IE8中，页面和触发元素的坐标系统的起点则比其它浏览器下移了2px。当点击页面起点时，结果是（-2，-2）。当点击触发元素的border-box的左上角时，结果是（-2，-2）。
在IE7中，（1）当以页面为参考时，页面的坐标系统也包括了浏览器窗口的有效显示区域边缘的2px的灰色边框，但是起点还是和其它浏览器一样，即页面左上角（不包括灰色边框）；如果点击灰色边框，则会出现负值。（2）当以触发元素为参考时，触发元素的坐标系统的起点则比其它浏览器下移了2px。当点击触发元素的border-box的左上角时，结果是（-2，-2）。