
Rychlé kliknutí a vyvolání události
Jak zajistit, aby ovládací prvky uživatelského rozhraní reagovaly správně i na rychlé kliknutí.
Problém
Ovládací prvky běžných JS aplikací zpravidla provádějí nějakou událost při kliknutí myši (onclick).
Kliknout
Co nepěkného se může stát? V situaci, kdy uživatel bude chtít kliknout na více věcí v rychlém sledu, se snadno stane, že pohyb myši v momentě kliknutí událost onclick nespustí.
Toto může nastat ve třech reálných případech:
- uživatel tlačítko myši stlačí, potom si uvědomí, že kliknout nechce, a tak odjede pryč, aby akci nevyvolal,
- uživatel je tak rychlý, že chce na prvky klikat za jízdy, tudíž akci nevyvolá,
- uživatel má problémy s přesností a kliknutí bez (lehkého) posunu myši je pro něj obtížné.
Kromě bodu 1 jsou to situace nežádoucí. A nepomůže ani použití tlačítka (<button>) nebo odkazu.
Řešení
Odstranit tento problém umí událost onmousedown.
Výhodné to může být i v rychlosti aplikace (onmousedown člověk provede běžně o desítky milisekund dříve než onclick). Problém ale je v rozmyslení si kliknutí.
Docela funkční mi přijde postup, kdy se při onmousedown požadovaná akce připraví do onmouseup (puštění tlačítka nad elementem) a onmouseout (odjetí myší z elementu). A z onmouseout se akce po nějaké době (cca 80 milisekund) vyhodí časovačem.
Živá ukázka srovnávající oba přístupy.
Pokud se výsledek akce má získávat AJAXem, nabízí se požadavek na soubor zavolat již při onmousedown, ale zobrazit až při potvrzení kliknutí (onmouseup/onmouseout).
Související články
JavaScript null a undefined
Rozdíly mezi null a undefined v JavaScriptu, kdy je používat a jak se vyhnout běžným chybám.
Sleep v JavaScriptu
Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await
JavaScript Battery API
Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.