Agregar eventos a Agregar eventos en MooTools -

Nota: Esta publicación ha sido actualizada.

Una de mis grandes molestias en la web es cuando un elemento tiene eventos de clic adjuntos pero el elemento no tiene el cursor “puntero”. Quiero decir, ¿cómo diablos se supone que el usuario sabe que puede/debe hacer clic en algo? Es una locura. Llaméa Chris Coyier , a otros desarrolladores y, diablos, llamaría a mi madre si fuera necesario.

Me propuse encontrar un método para asignar automáticamente el cursor a los elementos que reciben un evento de “clic” adjunto. Básicamente, quería agregar un evento para agregar un evento. Afortunadamente MooTools hace esto posible.

El JavaScript de MooTools

/* actualiza el cursor al agregar/eliminar evento de clic */Element.Events.click = { base:'click',onAdd: function() {this.setStyle('cursor','pointer');},onRemove: function( ) {this.setStyle('cursor','');}};/* uso */window.addEvent('domready',function() {$('click-me').addEvent('click',function () {/* ejecuta lo que quieras, pero se agrega el cursor del puntero */});$('click-me').removeEvents('click'); // cursor desaparecido});

Creo un evento de clic personalizado, basado en el evento de clic, y agrego el cursor de “puntero” cuando se agrega el evento de clic y luego elimino ese cursor cuando se elimina el evento de clic. ¡Tan sencillo!

Ahora bien, si pudiera lograr que los proveedores de navegadores implementaran esto… Bueno, ¡un paso a la vez!

El JavaScript actualizado de MooTools

/* actualiza el cursor al agregar/eliminar evento de clic */Element.Events.click = { base:'click',onAdd: function() {if(this.setStyle) {this.store('original-cursor',this. getStyle('cursor'));this.setStyle('cursor','puntero');}},onRemove: function() {if(this.setStyle) {this.setStyle('cursor',this.retrieve(' cursor-original'));}}};

Esta versión actualizada tiene en cuenta el cursor original del elemento.