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

18/8/08 - Un rápido ejemplo de uso de Mootools para saber la posición del ratón en el momento que se hace un clic en el elemento que nosotros queramos. Es un ejemplo sencillo de las posibilidades de la clase Event de Mootools, que sirve para hacer cosas con eventos de usuario.

Antecedentes acerca de conocer la posición del ratón

Las cosas como las que queremos hacer en este artículo, averiguar la localización del mouse en la página, las debemos realizar con Javascript. Para ahorrarnos dificultades de cara a los distintos tipos de navegadores es interesante utilizar un framework como Mootools, que nos ayuda a realizar un trabajo más sencillo de cara a la programación de scripts del lado del cliente.

Si queremos saber la posición del ratón en un momento dado, tenemos que definir un evento para ejecutar código en ese momento. En nuestro ejemplo queremos saber la posición del ratón en el momento de hacer clic sobre un elemento de la página.

Referencia: Tenemos un manual de Mootools para explicar el funcionamiento del framework Javascript.

El código Mootools

Así que en este artículo vamos a realizar un evento y dentro de ese evento vamos a crear el código para mostrar las coordenadas del lugar donde se encuentra el ratón.

Tenemos este elemento HTML:

<div id="elementocualquiera" style="border: 1px solid #999999; background-color:#ccffcc; width: 120px; padding: 5px;">
Tienes que hacer clic en esta capa.
</div>

Ya ahora este código Mootools para crear el evento:

$("elementocualquiera").addEvent('click', function(event) {
   alert("Posición del ratón\nx: " + event.page.x + "\ny: " + event.page.y);
});

Al asignar un evento a un elemento en Mootools, se asocia una función a ese evento. En la propia función se recibe como parámetro un objeto evento, de la clase Event, que se ha producido.

En el objeto de la clase Event encontramos varias propiedades, entre las que hay un par de ellas que son la posición del ratón al producirse el evento: event.page.x / event.page.y

Ahora veremos que al pulsar con id="elementocualquiera", por medio del evento click de Mootools, se muestra en una caja de alerta la posición del ratón. Ver el ejemplo en una página aparte.

Recuerda que tenemos un manual de Mootools para poder entender bien los procesos explicados en este artículo concernientes a Mootools.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba