如何阻止Highcharts Treegraph节点点击时展开/折叠，仅捕获点击事件

我正在使用Highcharts的treegraph类型可视化系统发育语言树。点击节点时，默认行为会展开或折叠其子节点，我希望阻止该展开/折叠行为，仅注册点击事件。已查阅Highcharts API文档，但未找到直接解决该问题的方案，相关代码如下：

Highcharts.chart('container', {
    chart: {
        spacingBottom: 30,
        marginRight: 120
    },
    title: {
        text: 'Phylogenetic language tree'
    },
    series: [
        {
            type: 'treegraph',
            allowDrillToNode: false,
            keys: ['parent', 'id', 'level'],
            clip: false,
            allowPointSelect: false,
            collapseButton: {
                enabled: true
            },
            events: {
                click: function (event) {
                    console.log(event.point.id)
                    /* console.log(event.point.linkToParent) */
                    console.log(event.point.parent)
                    event.preventDefault()
                }
            },
            data: [
                [undefined, 'Proto Indo-European'],
                ['Proto Indo-European', 'Balto-Slavic'],
                ['Proto Indo-European', 'Germanic'],
                ['Proto Indo-European', 'Celtic'],
                ['Proto Indo-European', 'Italic'],
                ['Proto Indo-European', 'Hellenic'],
                ['Proto Indo-European', 'Anatolian'],
                ['Proto Indo-European', 'Indo-Iranian'],
                ['Proto Indo-European', 'Tocharian'],
                ['Indo-Iranian', 'Dardic'],
                ['Indo-Iranian', 'Indic'],
                ['Indo-Iranian', 'Iranian'],
                ['Iranian', 'Old Persian'],
                ['Old Persian', 'Middle Persian'],
                ['Indic', 'Sanskrit'],
                ['Italic', 'Osco-Umbrian'],
                ['Italic', 'Latino-Faliscan'],
                ['Latino-Faliscan', 'Latin'],
     
            ],
            marker: {
                symbol: 'circle',
                radius: 6,
                fillColor: '#ffffff',
                lineWidth: 3
            },
            dataLabels: {
                align: 'left',
                pointFormat: '{point.id}',
                style: {
                    color: '#000000',
                    textOutline: '3px #ffffff',
                    whiteSpace: 'nowrap'
                },
                x: 24,
                crop: false,
                overflow: 'none'
            }
        }
    ]
});

解决方案 #

要实现仅捕获节点点击事件、阻止默认展开/折叠的需求，可采用以下两种方法：

方法一：禁用折叠按钮+阻止事件冒泡 #

如果不需要保留节点的折叠按钮，直接禁用按钮并在点击事件中阻止事件冒泡和默认行为即可：

series: [{
    type: 'treegraph',
    // ...其他配置
    collapseButton: {
        enabled: false // 隐藏默认折叠按钮
    },
    events: {
        click: function (event) {
            // 执行你的自定义逻辑
            console.log(event.point.id);
            console.log(event.point.parent);
            
            // 彻底阻止默认折叠行为
            event.stopPropagation();
            event.preventDefault();
        }
    }
}]

方法二：重写Treegraph的点击处理逻辑（保留折叠按钮） #

如果需要保留折叠按钮的功能，但仅禁用节点本身的点击折叠，可在初始化图表前重写Treegraph系列的onPointClick方法：

// 重写Treegraph的点击处理函数
Highcharts.seriesTypes.treegraph.prototype.onPointClick = function (e) {
    const point = e.point;
    
    // 执行你的自定义点击逻辑
    console.log(point.id);
    console.log(point.parent);
    
    // 仅当点击的不是折叠按钮时，阻止默认折叠行为
    if (!e.target.classList.contains('highcharts-treegraph-collapse-button')) {
        e.stopPropagation();
        e.preventDefault();
    }
};

// 初始化图表（原代码不变）
Highcharts.chart('container', {
    // ...你的图表配置
});

这两种方法都能达到仅捕获节点点击事件、阻止默认展开/折叠的效果。方法一简洁直接，适合不需要折叠功能的场景；方法二则可以区分节点和折叠按钮的点击，保留按钮的折叠能力。

内容的提问来源于stack exchange，提问作者Adrian Raudaschl