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

在日常Web操作中，您经常会遇到鼠标交互问题，并且可能需要了解鼠标的坐标。下面提供了三种获取鼠标坐标的方法。

在此之前，您需要了解屏幕，浏览器窗口和文档之间的区别。

相对于屏幕的位置

屏幕指的是计算机监视器，大小范围为14-40英寸以上。更改浏览器窗口的大小和滚动文档不会改变鼠标相对于屏幕的位置。

需要强调的是事件。事件是一个声明全局变量的对象。可以在Chrome和IE下随意访问它。但是Firefox下没有事件对象！

好消息是：在IE8 chrome中，有一个事件对象！

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属性值获取当前页面的位置，而忽略页面滚动的因素。如果我们需要知道相对于文档的当前位置，我们只需要在浏览器窗口滚动的长度上添加先前的位置信息即可。可以。

在IE 6、 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 };
}

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-364118-1.html