lunes, 27 de octubre de 2014

Averiguar la posición del ratón al hacer clic

En el objeto evento, entre otras muchas cosas, existen dos propiedades que nos informarán sobre la posición del ratón al producirse ese evento: 
• pageX: que nos informa sobre el número de píxeles desde el lateral izquierdo de la página. 
• pageY: con el número de píxeles desde la parte de arriba de la página. 
Veamos el siguiente ejemplo:

$("#mielemento").click(function(e){
$("#mielemento").html("X: " + e.pageX + " - Y: " + e.pageY)
});

Al hacer clic en el elemento con id="mielemento" se mostrarán las coordenadas X e Y del lugar de la página donde se hizo clic. Las coordenadas se mostrarán como texto en la propia capa sobre la que se ha hecho clic. Se puede ver una página con este código en funcionamiento. Este código se puede modificar fácilmente para que se muestre las coordenadas del ratón al hacer clic en la página, independientemente de donde se haga clic y no sólo en un elemento en concreto

$(document).click(function(e){
alert("X: " + e.pageX + " - Y: " + e.pageY)
});

Como se puede ver, se ha indicado el evento "click" sobre el objeto document, que existe en Javascript y que hace referencia a todo el documento que se está visualizando. El código completo de una página que define este evento y utiliza las mencionadas propiedades del objeto evento es el siguiente.

<html>
<head>
<title>Trabajando con el objeto evento</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$(document).click(function(e){
alert("X: " + e.pageX + " - Y: " + e.pageY)
});
})
</script>
</head>
<body>
<h1>Trabajando con el objeto evento</h1>
Haz clic en cualquier parte de la página...
</body>
</html>

Podemos ver el ejemplo en funcionamiento en una página aparte. Nota: en los ejemplos anteriores hemos visto cómo calcular la posición del ratón al hacer clic. Sin embargo, nosotros podemos calcular la posición del ratón al producirse cualquier evento, ya que el objeto evento de jQuery está disponible para cualquier evento. Por ejemplo, con este código mostramos la posición del ratón al moverlo por la página, mostrando las coordenadas en el texto de los titulares h1 que pueda haber en la página:

$(document).mousemove(function(e){
$("h1").html("X: " + e.pageX + " - Y: " + e.pageY)
});

Si lo deseas, puedes ver el script en marcha aquí. Con las nociones que tenemos en este momento sobre el objeto evento podremos continuar con las explicaciones sobre eventos, en las que utilizaremos varios aspectos de este objeto. Así pues, puedes continuar esta lectura aprendiendo acerca de los Eventos de ratón.

No hay comentarios:

Publicar un comentario