防止没有Jquery的冒泡

当我将鼠标移动到容器面板上时，会显示子面板，但只要将鼠标移到子面板上，便会触发mouseout事件并隐藏面板。防止没有Jquery的冒泡

这是我的代码的简化版本，因为面板位于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>

来源

2010-03-17 mariki

你想达到什么？只要panelChild位于panelContainer内部，您就可以做的事情不多。 – 2010-03-17 12:45:33

我可以将chidpanel移动到外面，但是，我必须将事件也添加到孩子。 – mariki 2010-03-17 12:59:57

为什么你拒绝使用jQuery，如果你正在使用其他框架，它可能使用jQuery以及使用noconflict（）; – ant 2010-03-17 13:08:44

事件侦听器，直到panelChild收到的onmouseover不要添加到panelContainer事件。实际上，您可能根本不需要panelContainer元素上的小事件事件。只需添加即可至panelChild，您应该没问题。

还有一件事。你写“陈述/隐藏”陈述的方式有点奇怪。这里是我会做什么：

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

来源

2010-03-17 12:34:28 Robusto

但panelChild是隐藏的，它应该在用户悬停在标题上时显示 – mariki 2010-03-17 12:38:05

@mariki：你的代码的写法** panelChild **将在鼠标悬停在* * panelContainer **并在退出时隐藏。如果您希望在将鼠标悬停在** lnkTitle **上时发生显示，请将* onmouseover *上的悬停处理为** lnkTitle **;无论如何，在** panelChild **上处理* onmouseout *。如果这不是您想要的行为，请编辑您的帖子以澄清。 – Robusto 2010-03-17 12:42:53

将鼠标悬停在标题上时应该消除子面板，并在鼠标悬停在子面板上时保持显示。 – mariki 2010-03-17 12:47:59

或拉子父容器的外面，使用JavaScript来重新定位到元件下方。

来源

2010-03-17 13:07:01

我应该在哪里设置事件？ – mariki 2010-03-17 13:14:33

如果我理解正确，您将要在容器面板外面弹出的面板，容器面板保留事件，然后在显示面板时添加代码以将子面板移动到控件下方右侧你想要面板显示，我假设你想要的链接。 – 2010-03-17 14:03:25

以及我该怎么做？儿童小组应显示在链接的右侧。 – mariki 2010-03-17 15:06:42

此外，由于您使用的是.NET，因此有一个Ajax控件工具包扩展器HoverMenuExtender，它在鼠标悬停/放开时显示或隐藏面板，您可以轻松使用它进行设置。有一个演示在asp.net/ajax

来源

2010-03-17 14:04:52

我知道那里有工具，如果我想使用它们，我会使用jQuery。但我不知道。 – mariki 2010-03-17 14:41:24

防止没有Jquery的冒泡

回答

相关问题