没特殊声明代码在IE8，Chrome下进行测试兼容鼠标点击位置坐标获取

在某些DOM操作中，我们经常处理元素的位置。鼠标交互是一个经常使用的方面。令人失望的是，不同的浏览器甚至会产生不同的结果。因此，本文是通过单击鼠标获得的位置坐标的简单摘要。没有特别声明该代码已在IE8，FireFox和Chrome下经过测试并兼容

鼠标单击位置坐标

相对于屏幕

如果涉及到单击鼠标来确定位置相对简单，则在获取鼠标单击事件之后，事件screenX和screenY会获得相对于屏幕左边界和上边界的单击位置，而与iframe因子无关，在不同的浏览器下，性能相当一致。

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

相对于浏览器窗口

可以实现简单的代码，但这还不够，因为在大多数情况下，我们希望获得相对于浏览器窗口的鼠标单击位置的坐标。事件的clientX和clientY属性表示相对于文档的鼠标单击位置。左边缘，上边缘。如此类似，我们编写了这段代码

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

相关文件

简单测试没问题，但是clientX和clientY会获得相对于当前屏幕的坐标，而忽略页面滚动因子，这在许多情况下很有用，但是当我们需要考虑页面滚动时，即相对于document（body元素的坐标呢？只需添加滚动的位移，让我们尝试计算下面页面滚动的位移。

实际上，问题在Firefox中要简单得多，因为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 };
        }

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-351507-1.html