在 JavaScript 中跟蹤滑鼠位置

  1. JavaScript 中跟蹤滑鼠事件的各種方法
  2. 在 JavaScript 中使用 PageXPageYclientXclientY 跟蹤滑鼠位置

為了在 JavaScript 中跟蹤滑鼠移動,我們使用了一個事件監聽器。事件偵聽器是不斷偵聽正在發生的變化的東西。例如,mousedown 事件僅在使用者單擊滑鼠按鈕時觸發。

JavaScript 中有各種可用的滑鼠事件,其中我們將關注 mousemove 事件,因為我們要跟蹤滑鼠位置。要檢視滑鼠事件的完整列表,你可以訪問滑鼠事件 MDN 文件

JavaScript 中跟蹤滑鼠事件的各種方法

要跟蹤滑鼠位置,我們必須在瀏覽器標籤頁中找到它的 x 軸(水平位置)和 y 軸(垂直位置)。你可能知道瀏覽器的左上角用 (0,0) 表示。如果你水平移動滑鼠,它的 x 位置會改變,如果你垂直移動滑鼠,它的 y 位置會改變。

有兩種不同的方法可以獲取瀏覽器標籤頁中滑鼠的這些 xy 位置,這些方法如下。

  1. 如果要跟蹤滑鼠相對於網頁大小的位置,請使用 pageXpageY
  2. 如果你想根據螢幕的可見區域跟蹤滑鼠位置,請使用 clientXclientY

在 JavaScript 中使用 PageXPageYclientXclientY 跟蹤滑鼠位置

讓我們通過下面的例子來理解這兩種方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="height: 1000px;">Div with height 1000px...</div>
    <script src="./script.js"></script>
</body>
</html>

在這裡,我們有一個 HTML 文件。在 body 標籤內,我們有一個帶有一些文字的 div 元素和一個 1000pxheight。我們為這個 div 元素賦予如此高的高度是有原因的。通過為 div 提供這麼多高度,我們將在網頁內得到一個滾動條,這對於說明上述兩種跟蹤滑鼠移動的方式是必要的。

然後我們有一個指令碼標籤,將下面的指令碼連結到 HTML 文件。

function mousemove(event){
    console.log("pageX: ",event.pageX, 
    "pageY: ", event.pageY, 
    "clientX: ", event.clientX, 
    "clientY:", event.clientY)
}

window.addEventListener('mousemove', mousemove);

我們使用指令碼檔案中的 addEventListener 函式向視窗物件新增了 mousemove 事件。這個函式有兩個引數,第一個引數是我們要新增的事件。第二個引數是事件觸發後將執行的函式。

在本例中,我們建立了函式 mousemove(),並將其作為回撥傳遞給事件偵聽器。此函式將 event 作為引數。這個 event 變數將提供滑鼠更新後的 xy 位置。你可以給 mousemove() 函式取任何名字,但你必須將確切的事件名稱傳遞給事件偵聽器;否則,它將無法工作。

mousemove() 函式中,我們只有 console.log() 使用 event.pageXevent.pageYevent.clientXevent.clientY 的滑鼠值。下面的螢幕截圖說明了上述程式碼的輸出。

在 javascript 中跟蹤滑鼠位置

檢視控制檯中的輸出,你不會看到任何區別,因為 pageX,clientX 顯示相同的值,而 pageYclientY 顯示相同的值。我們還沒有滾動頁面,所以我們得到了相同的值。

如果滾動頁面然後檢查值,則值會有所不同。下面的螢幕截圖說明了這一點。

在 javascript 中跟蹤滑鼠位置

滾動頁面後,事件 pageXpageY 提供的值大於事件 clientXclientY 提供的值。這是因為 pageXpageY 從網頁的開頭計算 xy 值,而 clientXclientY 根據螢幕的可見部分計算值。

稍後,你還可以獲取這些滑鼠位置並將它們應用於 HTML 元素(通過更新元素的左值和上值),以便滑鼠游標移動到哪裡,元素也將跟隨它。為此,你還必須使用其他滑鼠事件。

現在,你可能會遇到關於在實踐中使用這些滑鼠事件中的哪一個的問題,答案是這取決於用例。如果你只想在螢幕的可見區域內跟蹤滑鼠位置,請使用 clientXclientY。否則,你可以使用 pageXpageY 滑鼠事件來計算從網頁開頭開始的滑鼠位置。

相關文章 - JavaScript Mouse Position