•  06-09-2019
  •  | 
  •  

Question

I've got the following code:

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

I want to be able to hide the panelLocations when someone clicks off of the panel. I tried putting an onblur event of the panelLocations but it always disappears when the TreeView is clicked on.

How can I hide the panel when someone clicks outside of it but not inside of it?

Was it helpful?

Solution

if you use setTimeout() and clearTimeout() you can use the blurevent like you mentioned, but clear the timeout when anything inside the panel gains focus. That way, the only time the event would execute would be when it "really" lost focus.

OTHER TIPS

Your other alternative, is to handle onclick events on the body, but that could get slow fairly quickly. If you were to go that route, it would look something this like:

<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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top