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:

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

JS:

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