JavaScript获取鼠标当前位置的三种方法

JavaScript获取鼠标当前位置的三种方法

mwl1711883743

JavaScript获取鼠标当前位置的三种方法

在日常的网页操作中，常常会遇到鼠标交互的问题，可能会需要知道鼠标的坐标。以下提供了三种方法获取鼠标的坐标。
在这之前需要知道屏幕、浏览器窗口和文档的区别。

相对于屏幕的位置

屏幕指的是电脑的显示器，有14-40+寸大小不等，浏览器窗口大小的变化、文档的上下滚动操作都不会改变鼠标相对于屏幕的位置。
需要着重强调的是event，event是一个声明了全局变量的一个对象，在chrome和IE下，可以随意访问。但Firefox下是没有event这个对象的！
好消息是：在IE8，chrome下，是有event这个对象的！

function getMousePos(event) {            //event是一个声明了全局变量的一个对象
    var e = event || window.event;       //Firefox下是没有event这个对象的！！
    return { "x": e.screenX, "y": screenY };
}

但是多数时间我们更想要的是相对于浏览器窗口的位置信息，我们可以用dom的clientX属性值获取。浏览器窗口大小的改变一般情况下也会改变我们所获取的位置信息。

相对于浏览器窗口的位置

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

使用clientX属性值可以获取当前页面的位置，这忽略了页面滚动的因素，如果，我们需要知道当前相对于文档的位置，只需要在之前的位置信息加上浏览器窗口滚动的长度即可。
在除了IE6、7、8之外的浏览器，我们可以直接使用pageX属性值即可。

相对于文档的位置

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 };
}