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

電腦雜談  發布時間:2021-03-13 02:09:20  來源:網絡整理

在日常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

    相關閱讀
    發表評論  請自覺遵守互聯網相關的政策法規,嚴禁發布、暴力、反動的言論

    熱點圖片
    拼命載入中...
    岛国动作片AV在线网站_亚洲精品欧美综合一区二区_2021年最新无码福利视频