HighCharts系列与点点击事件冲突：如何实现互斥触发？

嘿，这个问题我之前也碰到过！核心原因是Highcharts的事件存在冒泡机制——当你点击数据点时，事件会向上传递到它所属的系列层级，导致两个事件都被触发了。要实现“点击折线仅触发系列事件，点击数据点仅触发点事件”的需求，只需要在数据点的点击事件里阻止事件冒泡即可。

修改后的代码示例 #

plotOptions: {
  series: {
    cursor: 'pointer',
    events: {
      click: function (event) {
        console.log(event);
        alert('series line clicked');
      }
    },
    point: {
      events: {
        click: function(event) {
          // 阻止事件冒泡到系列层级
          event.stopPropagation();
          alert('series point clicked');
        }
      }
    }
  }
}

原理说明 #

• 当点击数据点时，event.stopPropagation()会终止事件的向上传播，因此系列的点击事件不会被触发，只会执行点的点击逻辑。
• 当点击折线的空白区域（非数据点位置）时，事件只会触发到系列层级，不会触发点的点击事件，完全符合你的需求。

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