javascript 获取位置-js获取点击风暴的坐标位置

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在一些DOM操作中javascript 获取位置，我们经常会处理元素的位置。 键盘交互是一个经常使用的方面。 令人沮丧的是，不同的浏览器会出现不同的结果，甚至在某些浏览器下没有结果。 本文对如何获取鼠标点击的位置坐标做一些简单的总结。 没有特别声明该代码兼容 IE8、FireFox 和 Chrome。

鼠标点击位置坐标

相对于屏幕

如果涉及到鼠标点击确定位置比较简单，获取到鼠标点击后，通过screenX和screenY的screenX和screenY获取相对于屏幕右侧到顶部的距离的点击位置javascript 获取位置，不管由于iframe的激励，不同浏览器下面的表现还算一致。

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

相对于浏览器窗口

简单的代码就可以实现，但这还不够，因为大多数情况下我们想要获取鼠标点击位置相对于浏览器窗口的坐标，事件的clientX和clientY属性代表鼠标点击相对于文档的位置Right Margin, Top Margin.所以类似地我们写了这样的代码

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

相关文档

简单测试没有问题，clientX和clientY获取相对于当前屏幕的坐标，忽略页面滚动激励，这在很多情况下很有用，但是当我们需要考虑页面滚动，即相对于文档（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 };
        }