Javascript en caso de falta de definición

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

  •  06-09-2019
  •  | 
  •  

Pregunta

Tengo el siguiente código: 

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

Quiero ser capaz de ocultar los panelLocations cuando alguien hace clic fuera del panel. He intentado poner un evento onBlur de los panelLocations pero siempre desaparece cuando se hace clic en el TreeView.

¿Cómo puedo ocultar el panel cuando alguien hace clic fuera de ella, pero no dentro de ella?

¿Fue útil?

Solución

si utiliza setTimeout () y clearTimeout () se puede utilizar el blurevent como usted ha mencionado, pero borrar el tiempo de espera cuando nada dentro de las ganancias del panel se centran. De esa manera, la única vez que el evento se ejecutaría sería cuando "realmente" pierde el foco.

Otros consejos

Su otra alternativa, es para controlar los eventos onclick en el cuerpo, sino que podría ser lento con bastante rapidez. Si se va a ir por ese camino, se vería algo como esto: 

<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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top