2009-04-08 116 views
1

我有下面的代碼:上的JavaScript模糊事件

<span style="margin:0px 2px 0px 2px;"> 
    <asp:Label ID="labelPromptText" runat="server" Text="Selected Location:" /> 
    <span id="spanSelectedLocation" style="padding:2px 2px 2px 2px; cursor:pointer;" onmouseover="javascript:SetBackgroundColor('spanSelectedLocation', '#E0E0E0');" onmouseout="javascript:SetBackgroundColor('spanSelectedLocation', '#FFFFFF');" onclick="ControlLocationsVisibility();"> 
     <asp:Label ID="labelDisplay" runat="server" Text="None" Font-Bold="True" /> 
     <img alt="Click to change" src="Images/downArrow.png" /> 
    </span> 
</span> 

<asp:Panel ID="panelLocations" runat="server" DefaultButton="buttonFindLocation" style="position:absolute;border:solid 1px #E0E0E0;padding:10px 5px 5px 10px;background-color:#F7F7F7;width:350px;display:none;" > 
    Search: <asp:TextBox ID="textboxLocationSearch" runat="server" /> 

    <asp:Button ID="buttonFindLocation" runat="server" Text="Find" OnClick="buttonFindLocation_Click" /> 

    <input type="button" value="Cancel" onclick="javascript:ControlLocationsVisibility();" 

    <hr /> 

    <asp:TreeView ID="TreeViewLocations" runat="server" OnSelectedNodeChanged="TreeViewLocations_SelectedNodeChanged" NodeIndent="10"></asp:TreeView> 
</asp:Panel> 

我希望能夠隱藏panelLocations當有人點擊關閉面板。我嘗試過放置panelLocations的onblur事件,但當TreeView被點擊時它總是消失。

如果有人在其外面點擊但不在裏面,我該如何隱藏面板?

回答

1

如果你使用setTimeout()和clearTimeout(),你可以像你提到的那樣使用blurevent,但是當面板內的任何東西獲得焦點時清除超時。那樣,事件執行的唯一時間就是當它「真正」失去焦點時。

+1

你能給我一點點的例子嗎? – Miles 2009-04-20 14:23:16

0

您的另一種選擇是處理身體上的onclick事件,但這可能會相當快地變慢。如果你要走這條路線,它會看起來像這樣:

<html> 
<head> 
    <title>Hide Test</title> 
</head> 
<body> 
    <div id="first"> 
    <p>This is the first div.</p> 
    </div> 
    <div id="second"> 
    <p>This is the second div.</p> 
    </div> 
    <script type="text/javascript"> 
    var first = document.getElementById("first"); 
    var second = document.getElementById("second"); 
    var isChildOf = function (ele, parent) { 
    if (ele.parentNode === null) { 
     return false; 
    } else if (ele.parentNode === parent) { 
     return true; 
    } else { 
     return isChildOf(ele.parentNode, parent); 
    } 
    }; 
    document.body.onclick = function(e) { 
    if (isChildOf(e.target, second)) { 
     console.log("Hiding second."); 
     second.style.display = 'none'; 
    } else { 
     console.log("Showing second."); 
     second.style.display = 'block'; 
    } 
    }; 
    </script> 
</body> 
</html> 
+0

雅,我真的不想走這條路線,因爲代碼是在一個ASP.Net用戶控件,將被用於整個網站,我不能讓另一個用戶把他們的代碼中的所有內容放在每一項他們的頁面 – Miles 2009-04-10 16:04:41

相關問題