Prevent bubbling without Jquery
- by mariki
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>
