防止沒有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的冒泡

回答

相關問題