Stop event bubbling in Javascript
- by Kartik Rao
I have a html structure like :
<div onmouseover="enable_dropdown(1);" onmouseout="disable_dropdown(1);">
My Groups <a href="#">(view all)</a>
<ul>
<li><strong>Group Name 1</strong></li>
<li><strong>Longer Group Name 2</strong></li>
<li><strong>Longer Group Name 3</strong></li>
</ul>
<hr />
Featured Groups <a href="#">(view all)</a>
<ul>
<li><strong>Group Name 1</strong></li>
<li><strong>Longer Group Name 2</strong></li>
<li><strong>Longer Group Name 3</strong></li>
</ul>
</div>
I want the onmouseout event to be triggered only from the main div, not the 'a' or 'ul' or 'li' tags within the div!
My onmouseout function is as follows :
function disable_dropdown(d)
{
document.getElementById(d).style.visibility = "hidden";
}
Can someone please tell me how I can stop the event from bubbling up? I tried the solutions (stopPropogation etc) provided on other sites, but I'm not sure how to implement them in this context.
Any help will be appreciated.
Thanks a lot!
