jQuery: MouseOver vs. MouseEnter

Pro účely bakalářské práce jsem vytvářel pomocí XHTML, CSS a frameworku jQuery horizontální, vysouvací menu. Menu je tvořeno seznamem UL ve kterém jsou hlavní položky, reprezentované položkami seznamu - LI.

Pokud chceme, aby měla hlavní položka podpoložky (které se budou vysouvat), můžeme to zařídit vložením dalšího seznamu UL. Problém však nastal ve chvíli, kdy se měly podpoložky vysunout a následně by na ně uživatel přejel myší - než se na ně myš přesunula, menu se zasunulo. 

Pro úplnost, HTML kód menu by mohl vypadat například takto:

<ul>
    <li>Menu položka
        <ul>
            <li><a href="#">Podpoložka</a></li>
        </ul>
    </li>
    <li>Menu položka
        <ul>
            <li><a href="#">Podpoložka</a></li>
            <li><a href="#">Podpoložka</a></li>
            <li><a href="#">Podpoložka</a></li>
        </ul>
    </li>
    <li><a href="#">Menu položka</a></li>
    <li>Menu položka
        <ul>
            <li><a href="#">Podpoložka</a></li>
            <li><a href="#">Podpoložka</a></li>
        </ul>
    </li>
</ul>

Dlouho jsem bádal, čím to může být způsobeno - původně jsem si myslel, že nějakým paddingem, který už jQuery událost mouseout možná nebere jako součást elementu a tak se spustí. Problém byl nakonec v použitých jQuery událostech mouseover a mouseout.

V dokumentaci totiž naleznete i další události, které fungují podobně - mouseenter a mouseleave. Podle názvu jsou shodné a tak jsem jim nevěnoval pozornost, ale při tvorbě menu jsem začal pátrat, jaký je mezi nimi rozdíl.

Ať už si otevřete stránku dokumentace jQuery o události mouseover, mouseout, mouseenter a nebo mouseleave, vždy narazíte na příklad, který právě rozdíl mezi těmito funkcemi vysvětluje.

Mouseover se totiž spouští vícekrát i během pohybu v rámci zvoleného elementu, kdežto mouseenter se spustí opravdu pouze jednou při vstupu do oblasti elementu. Pro menu, které jsem tvořil, se tedy rozhodně hodí události mouseenter a mouseleave.