Runnig A Function When Leave Each Li Tag But Mouse Out Is Defined In The Ul Tag

I have a ul tag that has an onmouseout function. The ul contains 4 li elements. I want a function to be called when I leave the ul, but it is called when I go from one li to anothe

Solution 1:

Handling onmouseout on ul is a bit tricky, yes. You need to take care of event bubbling since onmouseout can fire on a or li and propagate back to ul. So even when you're leaving children elements - event will be fired for ul unless propagation is explicitly prevented.

Since you have jQuery tag, I can suggest this clean & easy approach:

Demo

HTML:

<ul id="settings" style="position:fixed;">
    <li><a href="#">111</a></li>
    <li><a href="#">222</a></li>
    <li><a href="#">333</a></li>
    <li><a href="#">444</a></li>
</ul>

JS:

$("#settings").mouseleave(function() {
    // Better to debug with console.log()
    // alert(20); 
    console.log(20);
});