Javascript evento sfocatura

StackOverflow https://stackoverflow.com/questions/731816

  •  06-09-2019
  •  | 
  •  

Domanda

Ho il seguente codice: 

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

Voglio essere in grado di nascondere i panelLocations quando un utente fa clic fuori del pannello. Ho provato a mettere un evento onblur dei panelLocations ma scompare sempre quando la TreeView viene cliccato.

Come posso nascondere il pannello quando un utente fa clic al di fuori di esso, ma non dentro di esso?

È stato utile?

Soluzione

se si utilizza setTimeout () e clearTimeout () è possibile utilizzare la blurevent come lei ha ricordato, ma cancellare il timeout quando nulla dentro i guadagni del pannello si concentrano. In questo modo, l'unica volta che l'evento sarebbe eseguire sarebbe quando è "veramente" perso messa a fuoco.

Altri suggerimenti

Il tuo altra alternativa, è quello di gestire gli eventi onclick sul corpo, ma che potrebbe ottenere lento abbastanza rapidamente. Se si dovesse seguire questa strada, sarebbe sembrare qualcosa di questo tipo: 

<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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top