Rychlé kliknutí a vyvolání události

Problém

Ovládací prvky běžných JS aplikací zpravidla provádějí nějakou událost při kliknutí myši (onclick).

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:

1. uživatel tlačítko myši stlačí, potom si uvědomí, že kliknout nechce, a tak odjede pryč, aby akci nevyvolal,
2. uživatel je tak rychlý, že chce na prvky klikat za jízdy, tudíž akci nevyvolá,
3. 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).