如何使用 JavaScript 查找光标的坐标?
在本教程中，我们将学习如何使用 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 属性通过 JavaScript 获取光标 Y 坐标的语法 -
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 坐标。
让我们了解如何在同一个示例中使用两个属性找出光标在 2D 平面上的位置。
步骤
步骤 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 找出光标在 2D 平面上的位置。
在本教程中，我们学习了 JavaScript 属性，借助单个属性和一个示例来找出光标的坐标，在该示例中，我们同时使用这两个属性来找出光标在 2D 平面上的位置或 X 和 Y 坐标。
