Jenže pokud to pověsím přímo na UL tak to kliknutí reaguje i na volné místa mezi LI.

Toto sa ošetruje kontrolou v handleri. Ak chceš ošetriť iba kliknutie na LI, tak skontroluješ, že event.target.tagName === 'LI'. Ak máš v LI ešte ďalšie elementy, tak sa ti ale môže stať, že v target budeš mať napr. SPAN, alebo A, alebo iný element. Preto v takom handleri obyčajne chceš najprv získať LI element pomocou funkcie closest (pre podporu IE viď polyfill na danom odkaze). V tvojom konkrétnom prípade, ak by si to chcel robiť použitím event delegation a mať ekvivalentné s tvojim kódom, stačí skontrolovať, že event.currentTarget !== event.target (stále ti zostáva problém s elementami vnorenými v LI).