三種獲取鼠標當前位置的JavaScript方法

在日常Web操作中，您經常會遇到鼠標交互問題，并且可能需要了解鼠標的坐標。下面提供了三種獲取鼠標坐標的方法。

在此之前，您需要了解屏幕，瀏覽器窗口和文檔之間的區別。

相對于屏幕的位置

屏幕指的是計算機監視器，大小范圍為14-40英寸以上。更改瀏覽器窗口的大小和滾動文檔不會改變鼠標相對于屏幕的位置。

需要強調的是事件。事件是一個聲明全局變量的對象?？梢栽贑hrome和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.cvs5.com/a/bofangqi/article-364118-1.html