在 JavaScript 中跟蹤滑鼠位置
為了在 JavaScript 中跟蹤滑鼠移動,我們使用了一個事件監聽器。事件偵聽器是不斷偵聽正在發生的變化的東西。例如,mousedown
事件僅在使用者單擊滑鼠按鈕時觸發。
JavaScript 中有各種可用的滑鼠事件,其中我們將關注 mousemove
事件,因為我們要跟蹤滑鼠位置。要檢視滑鼠事件的完整列表,你可以訪問滑鼠事件 MDN 文件。
JavaScript 中跟蹤滑鼠事件的各種方法
要跟蹤滑鼠位置,我們必須在瀏覽器標籤頁中找到它的 x 軸
(水平位置)和 y 軸
(垂直位置)。你可能知道瀏覽器的左上角用 (0,0)
表示。如果你水平移動滑鼠,它的 x
位置會改變,如果你垂直移動滑鼠,它的 y
位置會改變。
有兩種不同的方法可以獲取瀏覽器標籤頁中滑鼠的這些 x
和 y
位置,這些方法如下。
- 如果要跟蹤滑鼠相對於網頁大小的位置,請使用
pageX
和pageY
。 - 如果你想根據螢幕的可見區域跟蹤滑鼠位置,請使用
clientX
和clientY
。
在 JavaScript 中使用 PageX
、PageY
和 clientX
、clientY
跟蹤滑鼠位置
讓我們通過下面的例子來理解這兩種方式。
<!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
元素和一個 1000px
的 height
。我們為這個 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
變數將提供滑鼠更新後的 x
和 y
位置。你可以給 mousemove()
函式取任何名字,但你必須將確切的事件名稱傳遞給事件偵聽器;否則,它將無法工作。
在 mousemove()
函式中,我們只有 console.log()
使用 event.pageX
、event.pageY
和 event.clientX
、event.clientY
的滑鼠值。下面的螢幕截圖說明了上述程式碼的輸出。
檢視控制檯中的輸出,你不會看到任何區別,因為 pageX,
和 clientX
顯示相同的值,而 pageY
和 clientY
顯示相同的值。我們還沒有滾動頁面,所以我們得到了相同的值。
如果滾動頁面然後檢查值,則值會有所不同。下面的螢幕截圖說明了這一點。
滾動頁面後,事件 pageX
和 pageY
提供的值大於事件 clientX
和 clientY
提供的值。這是因為 pageX
和 pageY
從網頁的開頭計算 x
和 y
值,而 clientX
和 clientY
根據螢幕的可見部分計算值。
稍後,你還可以獲取這些滑鼠位置並將它們應用於 HTML 元素(通過更新元素的左值和上值),以便滑鼠游標移動到哪裡,元素也將跟隨它。為此,你還必須使用其他滑鼠事件。
現在,你可能會遇到關於在實踐中使用這些滑鼠事件中的哪一個的問題,答案是這取決於用例。如果你只想在螢幕的可見區域內跟蹤滑鼠位置,請使用 clientX
和 clientY
。否則,你可以使用 pageX
和 pageY
滑鼠事件來計算從網頁開頭開始的滑鼠位置。