ASP.NET WebForms-如何使用JQuery抑制TreeView上的单击动作？

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 ）

现在，到目前为止一切工作都很好- 直到我在模式弹出窗口中单击树中的一个节点为止 。 然后退出弹出窗口，但我不希望它弹出。 我不擅长JQuery（上面的JQuery不是我的），并且我尝试使用上面注释掉的代码抑制节点click事件，但这样做是抑制了整个弹出窗口的显示！

关于如何抑制节点点击触发模式弹出窗口的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

通常，您可以从元素的click事件返回false，以防止浏览器对其进行处理。

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