Correção do Hover Menu do iOS Mobile Safari

Um componente que tenho muito orgulho de ter criado é o Mozilla Developer Network’s da Mozilla Developer Network. Ele é elegante, flexível, acessível pelo teclado e relativamente compacto (embora exija jQuery). Um problema que notei, no entanto, foi que tocar uma vez abria o menu (bom), mas era preciso tocar duas vezes em um link de submenu para acionar uma mudança para o URL do link. Não é um problema catastrófico, mas certamente é irritante. Depois de alguns ajustes, encontrei uma solução que resolveu o problema!

O JavaScript

Descobri o problema principal: o item do menu principal foi codificado para abrir o submenu quando o mouseenter. Embora eu estivesse grato pelo fato de o Safari móvel do iOS estar usando mouseenter como um simples acionador de abertura, isso estava causando aos usuários a dor de tocar duas vezes para visitar um link no submenu. Por isso, aproveitei o recurso touchstart evento:

$menuItem.on('touchstart mouseenter focus', function(e) {
    if(e.type == 'touchstart') {
        // Don't trigger mouseenter even if they hold
        e.stopImmediatePropagation();
        // If $item is a link (<a>), don't go to said link on mobile, show menu instead
        e.preventDefault();
    }

    // Show the submenu here
});

Por que não touchend? Infelizmente, se o usuário mantivesse o dedo pressionado por mais de um toque rápido, o evento mouseenter seria acionado. É um pouco estranho, mas como tenho o touchstart como o primeiro evento no ouvinte, posso usar o stopImmediatePropagation para evitar que o mouseenter nunca seja acionado. O que também é bom é que não preciso fazer nenhuma detecção de dispositivo para fazer malabarismos com o touchstart e mouseenter, então esta é uma solução fantástica…

…mas não é uma solução perfeita. Se o usuário tocar e segurar o link do item do menu principal, o menu de contexto do navegador móvel não aparecerá porque usamos preventDefault. Ainda estou explorando e experimentando, portanto, continuarei atualizando esta postagem enquanto procuro o Santo Graal!