JavaScript 获取鼠标点击位置坐标

在一些DOM操做中咱们常常会跟元素的位置打交道，鼠标交互式一个常常用到的方面，使人失望的是不一样的浏览器下会有不一样的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取作一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容

 

鼠标点击位置坐标

相对于屏幕

若是是涉及到鼠标点击肯定位置相对比较简单，获取到鼠标点击事件后，事件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下问题会简单不少，由于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 };
        }

 

接下来呢，再作一点扩展，沿着上述问题的引入，假如我须要判断鼠标是否在dom元素#target的上方或者右方呢？

var target_position = $('#target').offset(); var top = target_position.top;//计算target的top var left = target_position.left;//计算target的left var left_side = left + $('#target').width();//计算target的宽度，这是由于我要判断的鼠标位置可能位于target的右方，若是是左方，则无需left_side,left就好 var hand_position = getMousePos(e); var y = hand_position.y; var x = hand_position.x; if(top > y || left_side < x){ //此时鼠标位于target的上方或右方 }