JavaScript获取鼠标点击位置坐标

JavaScript 获取鼠标点击位置坐标。

screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距。

 

function getMousePos(event) {             

     var e = event || window.event;             

     return {'x':e.screenX,'y':e.screenY}  

} 

event的clientX，clientY属性分别表示鼠标点击位置相对于浏览器页面（或客户区）的左边距，上边距。

 

function getMousePos(event) {              

   var e = event || window.event;              

   return {'x':e.clientX,'y':e.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;

            return { 'x': x, 'y': y };

   }