Agregar eventos a Agregar eventos en MooTools - » HostIN
Índice El JavaScript de MooTools El JavaScript actualizado de MooTools Nota: Esta…
- HostIN
- Programación
- Agregar eventos a Agregar eventos en MooTools -
Agregar eventos a Agregar eventos en MooTools -
Índice
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.
Índice de contenidos
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.
Te podría interesar...
¿Cuántos de sus datos personales están disponibles en línea? ¿El mejor tema de WordPress en 2024? ¿Qué es la red de entrega de contenido (CDN)? 79 temas de WordPress para diseñadores gráficos autónomos Los 7 proveedores de servicios de alojamiento mejor administrados de 2024 Una guía para principiantes sobre hostin web Costo de desarrollar una aplicación de mensajería similar a WhatsApp para 2024 6 razones principales por las que su empresa necesita un sistema de gestión de facturas Cargar hojas de estilo dinámicamente usando MooTools 1.2 -
Deja una respuesta Cancelar la respuesta
Lo siento, debes estar conectado para publicar un comentario.