En este artículo, veremos cómo obtener la posición del puntero del mouse usando jQuery. Para obtener la posición del puntero del mouse, se utilizan las propiedades event.pageX y event.pageY. La propiedad event.pageX se usa para encontrar la posición del puntero del mouse en relación con el borde izquierdo del documento. La propiedad event.pageY se usa para encontrar la posición del puntero del mouse en relación con el borde superior del documento.
Sintaxis:
event.pageX event.pageY
Aquí, usamos el método on() para adjuntar uno o más controladores de eventos para los elementos seleccionados y el método text() para establecer o devolver el contenido de texto del elemento.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to get the Position of
mouse pointer in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$(document).on("mousemove", function (event) {
$("#GFG").text("Mouse Position ("
+ event.pageX + ", " + event.pageY + ")");
});
});
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
How to get the Position of
mouse pointer in jQuery?
</h3>
<div id="GFG"></div>
</body>
</html>
Producción:
