Highcharts Gantt：点击标签时Point的dblclick事件无法触发

问题根源是Highcharts的数据标签默认会拦截点击事件，导致标签覆盖区域的双击无法传递到下方的进度条/里程碑point上。以下是两种可行的解决方案：

方案一：让标签不拦截点击事件 #

直接设置数据标签的pointer-events为none，这样点击标签时事件会穿透到下方的point，直接触发你已配置的dblclick事件。适合不需要标签单独交互的场景，实现最简单：

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      style: {
        pointerEvents: 'none' // 关键配置，让标签不阻挡点击
      },
      // 你的其他标签配置...
    },
    point: {
      events: {
        dblclick: function() {
          // 你的弹窗加载逻辑，比如：
          console.log('触发双击事件，任务名：', this.name);
          // 这里执行弹窗加载动作
        }
      }
    }
  }
}

方案二：单独给标签绑定双击事件 #

如果需要保留标签的其他交互，或者要给标签设置独立的双击逻辑，可以通过手动绑定事件实现，同时适配动态增删改任务的场景：

1. 定义事件绑定函数和处理函数：

// 绑定标签双击事件的函数
function bindLabelDblClick(chart) {
  chart.series.forEach(series => {
    series.points.forEach(point => {
      if (point.dataLabel) {
        // 先移除旧事件避免重复绑定
        point.dataLabel.element.removeEventListener('dblclick', handleLabelDblClick);
        // 绑定新的双击事件，把当前point传入处理函数
        point.dataLabel.element.addEventListener('dblclick', () => handleLabelDblClick(point));
      }
    });
  });
}

// 标签双击事件的处理逻辑
function handleLabelDblClick(point) {
  // 可以直接复用你原来的point双击逻辑
  const originalDblClickHandler = point.series.options.point.events.dblclick;
  if (originalDblClickHandler) {
    originalDblClickHandler.call(point); // 以当前point为上下文执行原函数
  }
  
  // 或者在这里写标签专属的双击逻辑
  // console.log('双击了标签，任务名：', point.name);
}

2. 在图表配置中添加事件钩子，确保动态操作后重新绑定：

Highcharts.ganttChart('container', {
  // 其他图表配置...
  chart: {
    events: {
      load: function() {
        // 图表加载完成后首次绑定标签事件
        bindLabelDblClick(this);
      }
    }
  },
  plotOptions: {
    series: {
      point: {
        events: {
          dblclick: function() {
            // 你的原弹窗加载逻辑
            console.log('触发point双击事件，任务名：', this.name);
            // 弹窗加载动作
          }
        }
      },
      events: {
        // 添加新任务后重新绑定标签事件
        addPoint: function() {
          bindLabelDblClick(this.chart);
        },
        // 更新任务后重新绑定
        afterUpdate: function() {
          bindLabelDblClick(this.chart);
        },
        // 删除任务后重新绑定
        removePoint: function() {
          bindLabelDblClick(this.chart);
        }
      }
    }
  }
});

两种方案都能解决标签区域双击无响应的问题，根据你的交互需求选择即可。

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