Jednou z komponent, na kterou jsem docela hrdý, je komponenta rozbalovací nabídky Mozilla Developer Network. Je elegantní, flexibilní, přístupný pomocí klávesnice a relativně kompaktní (i když vyžaduje jQuery). Jeden problém, kterého jsem si všiml, byl ten, že klepnutím jednou otevřel nabídku (dobré), ale museli byste dvakrát klepnout (dvakrát klepnout) na odkaz podnabídky, abyste spustili přesun na adresu URL odkazu. Není to katastrofický problém, ale rozhodně otravný. Po chvíli šťouchání jsem přišel s řešením, které uspokojilo nepříjemnosti!
JavaScript
Zjistil jsem hlavní problém: položka hlavní nabídky byla kódována tak, aby otevřela podnabídku po mouseenter . I když jsem byl vděčný, že mobilní Safari pro iOS používá mouseenter jako pouhý otevřený spouštěč způsoboval uživatelům bolest při dvojitém klepnutí, když navštívili odkaz v podnabídce. Využil jsem tedy výhody touchstart událost:
$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
});
Proč ne touchend ? Bohužel, pokud uživatel podrží prst stisknutý déle než na rychlé klepnutí, spustí se událost mouseenter. Trochu zvláštní, ale protože mám touchstart jako první událost v posluchači mohu použít stopImmediatePropagation abyste zabránili mouseenter od věčné střelby. Co je také hezké, že nemusím provádět žádnou detekci zařízení, abych žongloval touchstart a mouseenter , takže toto je skvělé řešení...
...ale není to dokonalé řešení. Pokud klepnete a podržíte odkaz na položku hlavní nabídky, kontextová nabídka mobilního prohlížeče se nezobrazí, protože jsme použili preventDefault . Stále objevuji a experimentuji, takže budu tento příspěvek nadále aktualizovat, když budu hledat svatý grál!