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)
• 当我单击“用户”部分中的 Add New 链接时，我会看到：(Image Link)
• 当我点击公司详细信息部分中的 ** Move Company** 链接时，我会看到：(Image Link)

现在，到目前为止，一切都运行良好 - 直到我在模式弹出窗口中单击树中的一个节点。然后它退出弹出窗口，我不希望它退出。我不擅长 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; });