
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
Jak vkládat 3D objekty na web pomocí Three.js
Které formáty použít, jak vytvářet modely pomocí AI a kdy raději použít obrázek nebo video.
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