JavaScript获取鼠标点击坐标：兼容IE、Firefox与Chrome的完整方案

JavaScript获取鼠标坐标：兼容IE8/Chrome/Firefox

在前端DOM开发中，经常需要处理元素位置与鼠标交互。然而，不同浏览器对鼠标位置的计算方式存在差异，甚至部分旧版浏览器无法正确返回结果。本文总结获取鼠标点击位置坐标的方法，并在未特别说明的情况下，确保代码在IE8、Firefox及Chrome浏览器中测试通过且兼容。

获取屏幕坐标

若仅需确定鼠标点击在屏幕上的绝对位置，处理相对简单。获取鼠标点击事件后，利用event对象的screenX和screenY属性，可直接获取点击点相对于屏幕左侧和顶部的距离。此方法不涉及iframe嵌套情况，且在各类浏览器中表现一致。

function getMousePos(event) {
var e = event || window.event;
return {'x':e.screenX,'y':screenY}
        }

获取视口坐标

上述代码简洁直观，但实际开发中，我们通常更需要知道鼠标点击位置相对于浏览器窗口可视区域的坐标。此时，event对象的clientX和clientY属性分别表示点击点相对于文档左侧和顶部的距离（即视口坐标）。基于此，可编写如下代码：

function getMousePos(event) {
var e = event || window.event;
return {'x':e.clientX,'y':clientY}
        }

计算文档坐标与滚动位移

初步测试看似正常，但需注意clientX与clientY仅反映相对于当前屏幕可视区域的坐标，忽略了页面滚动带来的位移。这在某些场景下非常有用，但若需获取相对于整个文档（body元素）的绝对坐标，则必须加上页面滚动的偏移量。接下来我们将探讨如何计算页面滚动位移。

在Firefox浏览器中，处理这一问题较为简便，因为其支持pageX和pageY属性。这两个属性在计算时已自动包含了页面滚动的距离，无需额外处理。

对于Chrome等浏览器，可通过document.body.scrollLeft和document.body.scrollTop获取页面滚动位移；而在IE浏览器中，则需通过document.documentElement.scrollLeft和document.documentElement.scrollTop来获取。

function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//alert('x: ' + x + '\ny: ' + y);
return { 'x': x, 'y': y };
        }