Prevent bubbling without Jquery
<p>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.</p>

<p>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.</p>

<p>This is the partial script:</p>

<pre><code>&lt;script type="text/javascript"&gt;
        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";           
        }

&lt;/script&gt;
</code></pre>

<p>This is the markup:</p>

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