javascript - jQuery FancyTree，点击展开问题

Question

我在 FancyTree 插件的帮助下做选择树，我正在尝试实现点击事件，当你点击选择框的标题时，它会起作用，他的所有子项目都会在所有级别展开。

首先...让我向您展示脚本:

var treeData = [
    {title: "item1 with key and tooltip", tooltip: "Look, a tool tip!",
        children: [
            {title: "Sub-item 3.1",
                children: [
                    {title: "Sub-item 3.1.1", key: "id3.1.1" },
                    {title: "Sub-item 3.1.2", key: "id3.1.2" }
                ]
            },
            {title: "Sub-item 3.2",
                children: [
                    {title: "Sub-item 3.2.1", key: "id3.2.1" },
                    {title: "Sub-item 3.2.2", key: "id3.2.2" }
                ]
            }
        ]
    },
    {title: "item2: selected on init", 
         children: [
            {title: "Sub-item 4.2",
                children: [
                    {title: "Sub-item 4.2.1", key: "id3.1.1" },
                    {title: "Sub-item 3.2.2", key: "id3.1.2" }
                ]
            },
            {title: "Sub-item 3.2",
                children: [
                    {title: "Sub-item 3.2.1", key: "id3.2.1" },
                    {title: "Sub-item 3.2.2", key: "id3.2.2" }
                ]
            }
        ] },
];

$(function(){

            $(".test").fancytree({
    //          extensions: ["select"],
                checkbox: true,
                selectMode: 3,
                source: treeData,
                select: function(e, data) {
                    // Get a list of all selected nodes, and convert to a key array:
                    var selKeys = $.map(data.tree.getSelectedNodes(), function(node){
                        return node.key;
                    });
                    $("#echoSelection3").text(selKeys.join(", "));

                    // Get a list of all selected TOP nodes
                    var selRootNodes = data.tree.getSelectedNodes(true);
                    // ... and convert to a key array:
                    var selRootKeys = $.map(selRootNodes, function(node){
                        return node.key;
                    });
                    $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
                    //$("#echoSelectionRoots3").text(selRootNodes.join(", "));
                },
                //this is problematic one
                click: function(e, data) {
                   data.node.toggleExpanded();
                },
                keydown: function(e, data) {
                    if( e.which === 32 ) {
                        data.node.toggleSelected();
                        return false;
                    }
                },
                // The following options are only required, if we have more than one tree on one page:
    //              initId: "treeData",
                cookieId: "fancytree-Cb3",
                idPrefix: "fancytree-Cb3-"
            });
            $("#btnToggleExpand").click(function(){
                $(".test").fancytree("getRootNode").visit(function(node){
                    node.toggleExpanded();
        });
        return false;
    });

        });

问题

我尝试用这部分代码这样做:

click: function(e, data) {
               data.node.toggleExpanded();
            },

但问题是它也会在选择时扩展选择框的子项，我不想这样。如果您展开一个节点，然后尝试在左侧箭头的帮助下打开另一个节点，则第二个节点会展开并在单击箭头时隐藏，这不是我想要的。

您可以在这里查看和编辑情况:http://jsfiddle.net/9vAhZ/

所以你可能会说我陷入了某种“无路可逃”的境地，我需要更聪明的人的帮助来告诉我如何解决这个问题，使用哪个事件，这样它就不会与 fancytree 的默认行为发生冲突.

欢迎任何帮助或建议。

Answer 1

您检查点击是否在选择按钮上

click: function(event, data) {
    var node = data.node,
        tt = $.ui.fancytree.getEventTargetType(event.originalEvent);
    if( tt === "checbox" ) {
        ...
    }
},

或者在 select 事件而不是 click 中实现它。