React中如何阻止Highcharts Treegraph节点默认展开/折叠点击行为？

你尝试的allowPointSelect配合e.preventDefault()、return false无效，是因为Highcharts Treegraph的节点展开折叠逻辑是内部绑定的，普通的point点击事件回调无法完全阻断默认行为。可以试试以下两种有效方案：

方案一：覆盖节点的toggle方法 #

Treegraph的展开/折叠是通过point.toggle()方法触发的，我们可以在图表加载完成后重写这个方法，让它空实现：

const options = {
  chart: {
    events: {
      load: function() {
        // 获取treegraph系列的所有节点
        this.series.forEach(series => {
          if (series.type === 'treegraph') {
            series.points.forEach(point => {
              // 重写toggle方法，阻止默认展开折叠
              point.toggle = () => {};
            });
          }
        });
      }
    }
  },
  series: [{
    type: "treegraph",
    data: [...],
    allowPointSelect: false,
    point: {
      events: {
        click: (e) => {
          // 这里可以写你的自定义点击逻辑
          console.log('节点被点击，但不会展开/折叠');
        }
      }
    }
  }]
};

方案二：在点击事件中同时阻止默认行为和事件传播 #

如果不想重写方法，也可以在point的点击事件中同时调用e.preventDefault()、e.stopPropagation()和e.stopImmediatePropagation()，并且确保allowPointSelect设为false：

const series = [{
  type: "treegraph",
  data: [...],
  allowPointSelect: false,
  point: {
    events: {
      click: (e) => {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        // 自定义点击逻辑
        return false;
      }
    }
  },
  // 如果启用了数据标签，也要阻止数据标签的点击行为
  dataLabels: {
    enabled: true,
    events: {
      click: (e) => {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        return false;
      }
    }
  }
}]

注意：如果你的Treegraph启用了数据标签，数据标签的点击也会触发节点的展开/折叠，所以需要同时处理数据标签的点击事件。

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