Prevent bubbling without Jquery

When I move mouse over the container panel, the child panel is displayed but as soon as i move mouse over the child panel, the mouseout event is triggered and panel get hidden.

This is simplified version of my code because panels are located inside gridview and therefore i can't use document.getElementById("panelchild") as it is (the js will get the specific id latter), but for now i want to make it work for this simple case.

This is the partial script:

<script type="text/javascript">
        function ShowPanel(e) {
            // e = e || window.event;
            //  var evtSrc = e.target || e.srcElement;          

            var panel = document.getElementById("panelchild")
            if (panel.style.display == "none")
                panel.style.display = "";
    开发者_运维技巧        else
                panel.style.display = "none";           
        }

</script>

This is the markup:

<asp:Panel id="panelContainer" runat="server" onmouseover="ShowPanel(event)" onmouseout="ShowPanel(event)" >
   <asp:HyperLink ID="lnkTitle" runat="server" style="float:left;margin-right:10px;" Text="This is title" NavigateUrl="www" />            
   <asp:Panel id="panelchild" runat="server"  style="display:none" >                
        <a id="A1" href="javascript: void(0);" style="text-decoration: none;">
             <img src="mylocalsite/images/Misc_Edit.gif" style="border:0px;float:left;" /> 
         </a>  
   </asp:Panel>
</asp:Panel>

Don't add the event listener to the panelContainer until the panelChild receives an onmouseover event. In fact, you probably don't need the onmouseover event on the panelContainer element at all. Just add onmouseout to panelChild and you should be fine.

One more thing. The way you have your "show/hide" statements written is a little weird. Here is what I would do:

        if (panel.style.display == "block")
            panel.style.display = "none";
        else
            panel.style.display = "block";           

Or pull the child outside of the parent container and reposition it to underneath the element using javascript.

Also, since you are using .NET, there is an Ajax Control Toolkit extender, the HoverMenuExtender, that shows or hides a panel when mousing over/out, that you can easily use to set this up. There is a demo at asp.net/ajax