La esquina superior izquierda de la pantalla es (0, 0), es decir, las coordenadas X e Y son (0, 0). Esto significa que el cero vertical es el punto más alto y el cero horizontal es el punto más a la izquierda.
Entonces, la tarea es encontrar las coordenadas del mouse sobre la pantalla.
Se puede encontrar usando la propiedad clientX y clientY:
- ClientX: Da la coordenada horizontal del evento.
- ClientY: Da la coordenada vertical del ratón.
Sintaxis:
For X coordinate: event.ClientX For Y coordinate: event.ClientY
A continuación se muestra la implementación requerida:
javascript
<html>
<head>
<script>
// coordinate function that calculate the X
// coordinate and Y coordinates
function coordinate(event) {
// clientX gives horizontal coordinate
var x = event.clientX;
// clientY gives vertical coordinates
var y = event.clientY;
document.getElementById("X").value = x;
document.getElementById("Y").value = y;
}
</script>
</head>
<!-- onmousemove event is called when the mouse
pointer is moving over the screen -->
<!-- calling of coordinate function -->
<body onmousemove="coordinate(event)">
<!-- X coordinate is stored in X-coordinate variable -->
X-coordinate
<input type="text" id="X">
<br>
<br>
<!-- Y coordinate is stored in Y-coordinate variable -->
Y-coordinate
<input type="text" id="Y">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Naman_Garg y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA