如何使用 JavaScript 獲取滑鼠游標的座標？

在本教程中，我們將學習如何使用 JavaScript 找到滑鼠游標的座標。我們需要找出 X 和 Y 座標，或者可以說螢幕上游標的水平和垂直位置。

JavaScript 提供了兩種不同的屬性來獲取滑鼠游標在螢幕上任何位置按下滑鼠按鈕時的座標：

  • 使用 event.clientX 屬性

  • 使用 event.clientY 屬性

使用 event.clientX 屬性

event.clientX 屬性用於找出觸發事件時游標水平位置或 X 座標的值。它返回一個數值，指定游標的水平位置。

語法

以下是獲取游標水平位置的語法：

function function_name(event){
   let X=event.clientX;
}

步驟

步驟 1 - 在第一步中，我們需要定義回撥函式，當事件觸發時執行某些操作。

步驟 2 - 在第二步中，我們將宣告一個變數，並使用 event.clientX 屬性為其賦值，該屬性返回游標位置的水平或 X 座標。

步驟 3 - 此步驟包含在螢幕上顯示上一步中宣告的變數中儲存的返回值所需的語句。

示例

以下示例說明了如何使用 JavaScript 獲取游標的 X 座標：

<!DOCTYPE html>
<html onclick="display(event)">
<body>
   <h3>Find the coordinates of the cursor with JavaScript</h3>
   <p id="para">Click anywhere on the screen to see X-coordinate of the cursor using "event.clientX" property.</p>
   <p id="result"></p>
   <script>
      function display(event) {
         let X = event.clientX;
         let result = document.getElementById("result");
         result.innerHTML = "<b>X-coordinate: </b>" + X;
      }
   </script>
</body>
</html>

在本例中，我們使用 event.clientX 屬性找出游標在 X 軸或水平方向上的位置。

使用 event.clientY 屬性

它用於找出觸發事件時游標在垂直方向或 Y 軸上的位置。與 event.clientX 屬性類似，它也返回一個數值，該數值儲存游標在 Y 軸或 Y 座標上的位置。

語法

以下是使用 event.clientY 屬性獲取游標 Y 座標的 JavaScript 語法：

function function_name(event){
   let Y=event.clientY;
}

步驟

步驟 1 - 在第一步中，我們將定義回撥函式，當事件觸發時在網頁上執行某些操作。

步驟 2 - 在第二步中，我們將宣告一個變數，並使用 event.clientY 屬性為其賦值，該屬性返回游標位置的垂直或 Y 座標。

步驟 3 - 此步驟包括在螢幕上顯示游標在 Y 座標或垂直方向上的返回值所需的語句，該返回值儲存在上一步中宣告的變數中。

示例

以下示例說明了如何使用 JavaScript 獲取游標的 X 座標：

<!DOCTYPE html>
<html onclick="display(event)">
<body>
   <h3>Find the coordinates of the cursor with JavaScript</h3>
   <p id="para">Click anywhere on the screen to see Y-coordinate of the cursor using "event.clientY" property.</p>
   <p id="result"></p>
   <script>
      function display(event) {
         let Y = event.clientY;
         let result = document.getElementById("result");
         result.innerHTML = "<b>Y-coordinate: </b>" + Y;
      }
   </script>
</body>
</html>

在本例中，我們使用 JavaScript 的 event.clientY 屬性找出游標的 Y 座標。

讓我們瞭解一下如何在同一個示例中使用這兩個屬性來找出游標在二維平面上的位置。

步驟

步驟 1 - 在第一步中，我們將定義回撥函式，當事件觸發時在網頁上執行某些操作。

步驟 2 - 在第二步中，我們將宣告兩個變數，並使用 event.clientX 和 event.clientY 屬性為其賦值，這兩個屬性分別返回游標在螢幕上水平和垂直或 X 和 Y 座標的位置。

步驟 3 - 此步驟包括在螢幕上顯示游標在 Y 座標或垂直方向上的返回值所需的語句，該返回值儲存在上一步中宣告的變數中。

示例

以下示例說明了如何使用 JavaScript 獲取游標的 X 座標：

<!DOCTYPE html>
<html onclick="display(event)">
<body>
   <h3>Find the coordinates of the cursor with JavaScript</h3>
   <p id="para">Click anywhere on the screen to see X and Y-coordinate of the cursor using JavaScript properties.</p>
   <p id="result"></p>
   <script>
      function display(event) {
         let X = event.clientX;
         let Y = event.clientY;
         let result = document.getElementById("result");
         result.innerHTML = "<b>X-coordinate: </b>" + X + "<br><b>Y-coordinate: </b>: " + Y;
      }
   </script>
</body>
</html>

在上面的示例中，我們同時使用了 event.clientX 和 event.clientY 屬性來使用 JavaScript 找出游標在二維平面上的位置。

在本教程中，我們學習了 JavaScript 屬性，瞭解瞭如何透過單獨使用以及使用一個示例（在該示例中我們同時使用這兩個屬性來查詢游標在二維平面或 X 和 Y 座標上的位置）來找出游標的座標。

更新於：2022-10-31

16K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告