如何使用 JavaScript 获取光标相对于屏幕的坐标？

在本教程中，我们将学习如何使用 JavaScript 获取鼠标光标相对于屏幕的坐标。我们将找到光标相对于屏幕的垂直（Y 轴）和水平（X 轴）位置。

JavaScript 允许我们使用两个不同的属性来获取鼠标光标相对于屏幕的坐标，当鼠标按钮在屏幕上的任何位置按下时。

  • 使用 event.screenX 属性
  • 使用 event.screenY 属性

让我们逐一讨论它们并提供代码示例。

使用 event.screenX 属性

event.screenX 属性用于获取 X 轴或光标水平位置的坐标，即它在屏幕上被点击的位置。它将返回一个表示光标水平位置的数值。

语法

以下语法将展示如何使用 event.screenX 获取 X 坐标或水平位置：

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

步骤

  • 步骤 1 - 在第一步中，我们将声明事件的回调函数，该函数将在事件触发时调用。
  • 步骤 2 - 在下一步中，我们必须声明一个变量并使用event.screenX属性为其赋值，该属性保存事件触发或单击事件发生时 X 坐标的值。
  • 步骤 3 - 在第三步中，我们显示了存储在上一步中声明的变量中的光标 X 坐标的值。

示例

以下示例将说明如何使用 event.screenX 属性获取光标单击位置的 X 坐标。

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

在上面的示例中，我们在 HTML 文档的根元素上使用了onclick事件，以便我们可以在屏幕上的任何位置单击并获取光标的水平位置或 X 坐标值，以及事件触发或单击发生的位置。

使用 event.screenY 属性

它用于获取光标的垂直位置或 Y 轴坐标，即光标被点击或事件触发的位置。与 event.screenX 类似，它也返回一个表示光标垂直位置的数值。

语法

以下语法将允许您获取光标单击位置的 Y 坐标或垂直位置。

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

步骤

  • 步骤 1 - 在第一步中，我们将声明事件的回调函数，该函数将在事件触发时调用。
  • 步骤 2 - 在下一步中，我们必须声明一个变量并使用event.screenY为其赋值，该属性保存事件触发或单击事件发生时 Y 坐标的值。
  • 步骤 3 - 在第三步中，我们显示了存储在上一步中新声明的变量中的光标 Y 坐标的值。

示例

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

在上面的示例中，我们在 HTML 文档的根元素 (html) 上使用了onclick事件，以便我们可以在屏幕上的任何位置单击并获取光标的垂直位置或 Y 坐标，以及事件触发或单击发生的位置。

让我们看看如何同时使用这两个属性来获取 X 和 Y 坐标或光标的水平和垂直位置。

步骤

  • 步骤 1 - 在第一步中，我们将声明事件的回调函数，该函数将在事件触发时调用。
  • 步骤 2 - 在下一步中，我们必须声明两个变量并使用event.screenX和event.screenY为其赋值，分别保存事件触发或单击事件发生时 X 坐标和 Y 坐标的值。
  • 步骤 3 - 在第三步中，我们显示了存储在上一步中声明的变量中的光标 X 坐标和 Y 坐标的值。

示例

以下示例将显示光标的 X 和 Y 轴坐标：

<!DOCTYPE html>
<html onclick="display(event)">
<body>
   <h3>Find the coordinates of the cursor relative to the screen</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.screenX;
         let Y = event.screenY;
         let result = document.getElementById("result");
         result.innerHTML = "<b>X-coordinate: </b>" + X + "<br><b>Ycoordinate: </b>: " + Y;
      }
   </script>
</body>
</html>

同样，在这个示例中，我们在HTML元素上使用了事件，以便全局访问单击事件，从而可以在屏幕上的任何位置单击。

在本教程中，我们了解了两个用于获取光标相对于屏幕坐标的属性，并借助单独的代码示例以及集成的示例（其中我们使用这两个属性来获取光标相对于屏幕的垂直和水平位置）对它们进行了讨论。

更新于： 2022-10-31

4K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告