ASP.NET的WebForms - 如何抑制點擊TreeView控件的行爲與jQuery？

Question

我有以下代碼：

<asp:Content ID="StyleContent" ContentPlaceHolderID="StyleContent" runat="server"> 
    <style type="text/css"> 
     #mask 
     { 
      position:absolute; 
      left:0; 
      top:0; 
      z-index:9000; 
      background-color:grey; 
      display:none; 
     } 

     #boxes .window 
     { 
      position:absolute; 
      left:0; 
      top:0; 
      width:440px; 
      height:200px; 
      display:none; 
      z-index:9999; 
      padding:20px; 
     } 

     #boxes #modalwindow 
     { 
      width:800px; 
      height:330px; 
      padding:10px; 
      background-color:#b9d3ee; 
      border: solid 2px #648abd 
     } 

     #boxes2 .window 
     { 
      position:absolute; 
      left:0; 
      top:0; 
      width:440px; 
      height:200px; 
      display:none; 
      z-index:9999; 
      padding:20px; 
     } 

     #boxes2 #modalwindowMoveCompany 
     { 
      width:350px; 
      height:800px; 
      padding:10px; 
      background-color:#ffffff; 
      border: solid 2px #648abd 
     } 

     .stylecenter 
     { 
      text-align: center; 
     } 
    </style> 
</asp:Content> 
<asp:Content ID="ScriptContent" ContentPlaceHolderID="ScriptContent" runat="server"> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      // Set up for displaying modal dialogs 
      $('a[name=modal]').click(function (e) { 
       // Prevent the default link behavior of navigation so we can use the link to show the Window 
       e.preventDefault(); 

       // Determine which href was clicked if it was in fact an href (though this demo as only one.) 
       var id = $(this).attr('href'); 

       // Determine browser windows dimensions. 
       var maskHeight = $(document).height(); 
       var maskWidth = $(window).width(); 

       // Set dimensions for the mask to opaque the screen when the modal window is displayed. 
       $('#mask').css({ 'width': maskWidth, 'height': maskHeight }); 

       // Make the Window Opaque   
       $('#mask').fadeIn("fast"); 
       $('#mask').fadeTo("slow", 0.8); 

       //Get the window height and width 
       var winH = $(window).height(); 
       var winW = $(window).width(); 

       // Set the Modal Window's dimensions to center in the browser window. 
       $(id).css('top', winH/2 - $(id).height()/2); 
       $(id).css('left', winW/2 - $(id).width()/2); 

       // Show the Modal Window 
       $(id).fadeIn("fast"); 

      }); 

//   // Suppress the node click in the CompanyTreeTarget control 
//   $('.IgnoreClicksInHere').click(function (e) { 
//    // Cancel the link behavior 
//    e.preventDefault(); 
//   } 

      // Handle Close Button Click Event 
      $('.window .close').click(function (e) { 
       // Cancel the link behavior 
       e.preventDefault(); 

       $('#mask').hide(); 
       $('.window').hide(); 
      }); 

      // The user clicks OUTSIDE the Modal Window and the window will be closed without save. 
      $('#mask').click(function() { 
       $(this).hide(); 
       $('.window').hide(); 
      }); 
     }); 
    </script> 
</asp:Content> 

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server"> 
    ... 

    <div id="boxes2"> 
     <div id="modalwindowMoveCompany" class="window"> 
      <center>Select company to be the new parent</center> 
      <div id="IgnoreClicksInHere" class="PrettyTree"> 
       <uc1:CompanyTree ID="CompanyTreeTarget" runat="server" /> 
      </div> 
      <asp:Button ID="SaveMoveCompany" runat="server" Text="Execute" onclick="SaveMoveCompany_Click" />&nbsp;* To cancel just click on the grey area outside this dialog box. 
     </div> 
     <!-- Mask to cover the whole screen --> 
     <div id="Div3"></div> 
    </div> 
    <div id="boxes"> 
     <div id="modalwindow" class="window"> 
      <%--<center>Enter New User</center>--%><br /> 
      <riv:UserDialog ID="UserDialog" runat="server" /> 
      <%--<asp:Button ID="btnCancel" runat="server" OnClick="btnCancel_Click" Text="Cancel" Width="100px" />--%> 
      <%--<asp:Button ID="btnCreate" runat="server" OnClick="btnCreate_Click" Text="Create" Width="100px" />--%> 
      <asp:Button ID="ModalButton" runat="server" Text="Save User" onclick="ModalButton_Click" />&nbsp;* To cancel just click on the grey area outside this dialog box. 
     </div> 
     <!-- Mask to cover the whole screen --> 
     <div id="mask"></div> 
    </div> 
</asp:Content> 

• 當運行它看起來像這樣：（Image Link）
• 當我點擊添加新鏈接的用戶部分我得到這樣的：（Image Link ）
• 當我點擊**移動公司在**公司的鏈接細節部分我得到這樣的：（Image Link）

0123現在

，一切工作好爲止 - 直到我在我的樹模態彈出內點擊一個節點上。然後退出彈出窗口，我不希望它彈出。我不擅長的JQuery（JQuery的上面是不是我的），我試圖壓制與上面的註釋掉的代碼節點點擊事件，但所有做的是從顯示抑制整個彈出！

上我能做些什麼，以從發射JQuery的接近常規的模式彈出抑制節點點擊任何想法？

TIA

Answer 1

我不知道爲什麼代碼從發射防止對話框，但你已經使用了類選擇，而不是一個id選擇。您也可能需要阻止事件傳播。

// 
// Suppress the node click in the CompanyTreeTarget control 
$('#IgnoreClicksInHere').click(function (e) { 
    return false; // prevents default action (on div?) and stops propagation up 
}); 

Answer 2

您通常可以從元素的單擊事件返回false以防止瀏覽器處理它。

$('node').click(function() { return false; });