如何使用 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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告