2009-04-08 7 views
1

私は、次のコードを持っている:私は誰かがパネルのオフにクリックしたときにpanelLocationsを隠すことができるようにしたい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のonblurイベントを入れようとしましたが、TreeViewがクリックされると常に消えます。

パネルの外側をクリックしたときにパネルを非表示にするにはどうすればよいですか?

答えて

1

setTimeout()とclearTimeout()を使用する場合は、前述のようにblureventを使用できますが、パネル内の何かにフォーカスが当たったらタイムアウトをクリアします。そうすれば、イベントが実行される唯一の時間は、「本当に」フォーカスを失ったときです。

+1

私は少しの例を教えてください。 – Miles

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

ya、私は本当にこのルートに行きたくはありません。なぜなら、コードはASP.Netユーザーコントロールの中にあり、Webサイト全体を通して使用され、別のユーザーがすべての項目にコードを入れさせることはできません。彼らのページ – Miles

関連する問題