JavaScript鼠标坐标属性详解：clientX、pageX与layerX的区别及兼容性处理

JavaScript鼠标坐标属性概述

JavaScript中并不存在独立的mouse对象，获取鼠标坐标需要依赖功能强大的event对象。

通过监听document元素的mousemove事件，即可实时获取鼠标的当前位置。

然而，event对象中与鼠标相关的属性繁多，容易令人困惑，具体包括以下情况：

测试代码与属性列表

总共有6组不同的坐标属性。

这些属性之间的区别并不直观，且在各浏览器间的兼容性存在差异。

本文旨在厘清这些属性的具体区别，并筛选出不推荐使用的属性。

测试代码示例

直接运行以下代码即可进行验证：

<!DOCTYPE html><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta charset="utf-8" /></p>
<style>
body {position:relative;}
div {min-height: 300px; background-color: #eee;}
#jg {right: 0; top: 10px; position: fixed; background-color: #f00;}
</style>
<p></head><br />
<body><br />
<span id="jg">显示结果</span><br />
<input type="button" value="一个按钮" /></p>
<div>屏内div</div>
<div style="height:1000px; width:2000px; background:#ddd;">很高很宽。。。</div>
<div>屏外DIV</div>
<p></body><br />
<script>
var jg = document.getElementById('jg');
document.onmousemove = function (e) {
e = e || window.event;
jg.innerHTML = 'layerX:'+e.layerX+
',layerY:'+e.layerY+
', <br/>clientX:'+e.clientX+
',clientY:'+e.clientY+
', <br/>pageX:'+e.pageX+
',pageY :'+e.pageY+
',<br/>offsetX:'+e.offsetX+
',offsetY:'+e.offsetY+
',<br/>screenX:'+e.screenX+
',screenY:'+e.screenY+
',<br/>x:'+e.x+
',y:'+e.y;
}
</script><br />
</html>

在测试过程中发现，Chrome（谷歌浏览器）和IE9完全兼容上述所有属性，这为对比测试提供了极大的便利。

经过对比分析，结果如下：

各坐标属性详细释义

各属性释义

clientX与clientY表示鼠标相对于浏览器视口（即忽略滚动条之外的部分）的坐标，所有浏览器均支持。

screenX与screenY表示鼠标相对于整个屏幕左上角的坐标，基本与document文档脱节，全浏览器兼容。

offsetX与offsetY表示鼠标相对于当前指向对象的坐标，例如鼠标指向按钮时，该值是相对于按钮的；Firefox不支持此属性。

x与y属性在标准浏览器中等同于layerX与layerY，在IE中可作为layerX的替代属性。

pageX与pageY表示鼠标相对于整个页面左上角的坐标，包含视口之外的部分；IE7和IE8不支持此属性。

重点解析layerX与layerY

重点：layerX与layerY

layerX与layerY是标准浏览器引入的新属性，IE9也支持。它可以替代offsetX与offsetY，其定义为：相对于当前指向元素最近的具有定位信息的元素的坐标。这里的“有定位”指CSS属性为非static（即非默认定位）。

如果当前指向的元素本身具有定位，则layerX与layerY返回相对于该元素的坐标；否则，会向上查找父标签；若父标签仍无定位，则继续向上查找，直到根元素html节点。

因此，在Firefox中，若要获取offsetX的值，必须为目标元素添加position定位信息。

浏览器兼容性总结

兼容性总结：

1. Firefox不支持offsetX、offsetY以及x、y属性，但完全可以使用layerX来替代； 2. IE中的x、y属性相当于Firefox和Chrome中的layerX与layerY； 3. IE7和IE8中document的边界与浏览器窗口边界存在2px的距离，因此在窗口最大化时，screenX最小值为2px； 4. IE9中的layerX与layerY虽有值，但计算结果往往不正确，似乎与html标签有关。例如，将滚动条拖至最右侧，鼠标从空白区域移到大DIV上时，大DIV最右边与第一个DIV最右边的差值也会被计入layerX中，导致计算复杂且错误；而Firefox与Chrome的layerX无此问题。因此，不建议在IE9中使用layerX。 5. 在Chrome中，x与y虽有值，但与clientX和clientY完全相同，因此不建议使用x、y属性。

兼容性补救方案

兼容性补救方案

在标准浏览器中，可以通过position与event.layerX配合来实现event.offsetX属性；

对于IE7和IE8，由于没有pageX和pageY，可通过document.documentElement.scrollLeft加上event.clientX来计算得出。

因此，在IE中，x、y或offsetX、offsetY可以去除其中一组。