Javascript est désactivé sur événement flou

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

  •  06-09-2019
  •  | 
  •  

Question

J'ai le code suivant: 

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

Je veux être en mesure de cacher les panelLocations quand quelqu'un clique hors du panneau. J'ai essayé de mettre un événement onblur des panelLocations mais il disparaît toujours lorsque le TreeView est cliqué.

Comment puis-je masquer le panneau lorsque quelqu'un clique à l'extérieur de celui-ci, mais pas à l'intérieur de celui-ci?

Était-ce utile?

La solution

si vous utilisez setTimeout () et clearTimeout (), vous pouvez utiliser le blurevent comme vous l'avez mentionné, mais le délai d'attente clair quand rien à l'intérieur se concentrent les gains du panneau. De cette façon, la seule fois que l'événement exécuterait serait quand il « vraiment » perdu le focus.

Autres conseils

Votre autre alternative, est de gérer les événements onclick sur le corps, mais cela pourrait se lent assez rapidement. Si vous deviez aller dans cette voie, il ressemblerait à quelque chose comme cela: 

<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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top