Morton 29 de septiembre de 2014 a las 13.08
   Imprimir artículo
elWebmaster.com

jQuery: Solución para enlaces en dropdowns en iOS


jquerywideSeguramente habrás visto el componente de dropdown de Mozilla. Es elegante, flexible, accesible a través del teclado y relativamente compacto, aunque requiere jQuery. Existe un pequeño detalle: hacer clic una vez abre el menú, pero se requiere un doble clic en el enlace de un submenú para movernos a esa dirección URL. Esto puede ser un problema cuando nuestro dispositivo está corriendo bajo iOS. Aquí traemos la solución.

¿Cuál es el núcleo del problema? El item de menú principal está preparado para abrir el submenú ante un evento mouseenter.  Esto en iOS genera conflicto, por lo que vamos a aprovecharnos del evento touchstart:

$item.on('touchstart mouseenter focus', function(e) {
    if(e.type == 'touchstart') {
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

¿Por qué no touchend?  Desafortunadamente, si el usuario mantiene su dedo por más tiempo que un simple toque, el evento mouseenter se va a disparar. Pero como touchstart es el primer evento que escucha, podemos usar stopImmediatePropagation para prevenir que se dispare el mouseenter. Lo bueno es que no necesitamos ninguna detección del dispositivo, lo que la hace una solución efectiva.

Pero no es perfecta. Si tocas y mantienes el enlace del item del menú principal, el menú contextual del navegador mobile no aparecerá, debido a que hemos usado el evento preventDefault.

Eso es todo ¡Esperamos que sea de utilidad!

Fuente original del artículo: David Walsh Blog
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder