جافا سكريبت على حدث Blur

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

  •  06-09-2019
  •  | 
  •  

سؤال

لقد حصلت على التعليمات البرمجية التالية:

<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 من Panellocations لكنه يختفي دائما عند النقر فوق TreeView.

كيف يمكنني إخفاء اللوحة عندما ينقر شخص ما خارج ذلك ولكن ليس داخلها؟

هل كانت مفيدة؟

المحلول

إذا كنت تستخدم Pettimeout () و ClearTimeout ()، فيمكنك استخدام Bluurevent مثلك، ولكن قم بإلغاء تحديد المهلة عند تركيز أي شيء داخل كسب اللوحة. بهذه الطريقة، والوقت الوحيد الذي سينفذ فيه الحدث سيكون عندما فقد "حقا" التركيز.

نصائح أخرى

البديل الآخر الخاص بك، هو التعامل مع أحداث 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>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top