Moderní tvorba webových aplikací

O webu

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

Jak zajistit, aby ovládací prvky uživatelského rozhraní reagovaly správně i na rychlé kliknutí.

3 minuty

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:

  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.

Kliknout odkazem

Řešení

Odstranit tento problém umí událost onmousedown.

Kliknout odkazem

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.

15 minut

Detekce otevření DevTools

Jak zjistit, že se na stránce otevřely vývojářské nástroje.

13 minut

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.

12 minut

Sleep v JavaScriptu

Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await

6 minut

Novinky e-mailem

Když budu mít něco opravdu zajímavého, můžu vám to poslat e-mailem

Přidej se k 500+ čtenářům
Jen kvalitní obsah
Žádný spam

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025