在没有Jquery的情况下防止冒泡

时间:2010-03-17 12:26:59

标签: asp.net javascript

当我将鼠标移到容器面板上时,会显示子面板,但只要我将鼠标移到子面板上,就会触发mouseout事件并隐藏面板。

这是我的代码的简化版本,因为面板位于gridview内部,因此我不能使用document.getElementById(“panelchild”)(js将获得特定的id后者),但是现在我想要使它适用于这个简单的案例。

这是部分脚本:

<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>

这是标记:

<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>

3 个答案:

答案 0 :(得分:0)

panelChild 收到 onmouseover 事件之前,请勿将事件侦听器添加到 panelContainer 。实际上,您可能根本不需要 panelContainer 元素上的 onmouseover 事件。只需将 onmouseout 添加到 panelChild ,您就可以了。

还有一件事。你写“show / hide”语句的方式有点奇怪。这就是我要做的事情:

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

答案 1 :(得分:0)

或者将子项拉出父容器,然后使用javascript将其重新定位到元素下面。

答案 2 :(得分:0)

此外,由于您使用的是.NET,因此有一个Ajax Control Toolkit扩展程序HoverMenuExtender,可以在鼠标移出/移出时显示或隐藏面板,您可以轻松地使用它进行设置。 asp.net/ajax有一个演示