jQuery Event Propagating

For a website I helped building at work I had to make some tabs hanging from to top of the browser viewport. When the mouse hovered over any of these tabs, a content pane slides down. I’ve created a plugin to do this which I’ll maybe write up and post some time. For now I’m going to walk through some of the problems I encountered with event propagation.

The whole contruction is pretty standard: a container div containing all content panels, which are hidden and displayed at appropriet times. followed by an ul for the tabs. These are at the bottom for obvious reasons. To let the panel slide down I used the mouseover() function on the li elements of the tabs. To hide the panel again I used the mouseout() function on the container div, this ensures that the panel does not close when moving the mouse to different tabs or over the content of the selected tab. This is where it went wrong, when moving from tab to tab or our of the tabs into the content panel, the panel closed. After some fiddling and debugging I found our that the .mouseout() event comming from the tab elements propagated to the surrounding container, triggering it’s .mouseout() and thus closing the panel.

Now istead of digging into the API and documentation I stubournly searched for any workaround or fixes, without success I might add. I tried stopping the event manually, and setting event target parameters, but nothing seemed to solve the problem. When the frustration took the upper hand I posted my problem on stackvoerflow.com, and the answer came within minutes (!). The problem lies withing the function I chose, as the jQuery documentation appearently clearly states.

This is the last paragraph of the documentation:

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

So all I had to do was replace the .mouseout() with .mouseleave() and all problems solved.