2

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 another li. Where is my mistake?

My list is:

<ul id="settings" style="position:fixed;" onmouseout="alert(20);">
<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>
Dag Høidahl
  • 7,873
  • 8
  • 53
  • 66
Emad Helmi
  • 43
  • 1
  • 5

1 Answers1

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);
});
Community
  • 1
  • 1
mishik
  • 9,973
  • 9
  • 45
  • 67
  • Which browser are you using? Do you have browser console opened? Also, try uncommenting `alert(20)` line. – mishik Jul 06 '13 at 09:05