js获取鼠标当前位置坐标

2017-03-01 10:08:42

在页面中获取鼠标坐标通常有三种方式，这三种方式各有不同，所的的值也是不一样的。

1.  首先是相对于页面的pageX和pageY。它指的是鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。但是他有一定的局限性，IE没有这个属性，但是也有解决的办法(使用了下面要说的 clientX和clientY)。 PageY=clientY+scrollTop-clientTop;//只讨论Y轴,X轴同理,下同
2. 相对于浏览器来说的clientX/clientY。他值的是鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化。
3. 相对于屏幕来说的screenX/screenY。鼠标在屏幕上的位置,从屏幕左上角开始（w3c标准）
4. 相较于触发事件的offsetX/offsetY。这是一个IE特有的属性,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值
5. 相对于坐标系的layerX/layerY。FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点

chrome和safari一条龙通杀!完全支持所有属性.其中(offsetX和layerX都是以border为参考点)

下面这个是获取相对于屏幕的坐标

document.onmousemove = function(e) {
    e = e ? e: window.event;
    document.writeln("X:" + e.screenX + "Y:" + e.screenY);
}