如何解决Highcharts中事件监听器被重复调用两次的问题

核心原因 #

Highcharts的render事件会在图表初始化、窗口缩放、数据更新等每次重绘时都触发，如果每次触发都给元素绑定事件，就会导致同一个元素被绑定多个相同的监听器，点击时自然触发多次。另外，xAxis标签在重绘时可能会被重新生成DOM元素，旧的监听器残留或新元素重复绑定也会引发问题。

可行解决方案 #

方案1：绑定前移除已有监听器（确保唯一性）

把事件处理函数抽成独立变量，每次render时先移除旧监听器再添加新的，避免重复绑定：

// 抽离处理函数，不要写在render回调内部
const handleAxisClick = (e) => {
  // 你的业务逻辑
  console.log('点击x轴标签:', e.target.textContent);
  e.preventDefault();
};

Highcharts.chart('container', {
  // 其他图表配置
  xAxis: {
    labels: {
      formatter: function() {
        return `<a href="#" class="axis-link">${this.value}</a>`;
      },
      useHTML: true // 必须开启，否则HTML标签不生效
    }
  },
  chart: {
    events: {
      render: function() {
        const links = document.querySelectorAll('.axis-link');
        links.forEach(link => {
          // 先移除旧监听器，再绑定新的
          link.removeEventListener('click', handleAxisClick);
          link.addEventListener('click', handleAxisClick);
        });
      }
    }
  }
});

方案2：使用事件委托（更高效，彻底避免重复绑定）

把事件绑定到图表容器上，利用事件冒泡处理点击，只需要绑定一次，不受重绘影响：

// 初始化时给容器绑定一次事件委托
const chartContainer = document.getElementById('container');
chartContainer.addEventListener('click', (e) => {
  if (e.target.classList.contains('axis-link')) {
    e.preventDefault();
    // 你的业务逻辑
    console.log('点击x轴标签:', e.target.textContent);
  }
});

Highcharts.chart('container', {
  // 其他图表配置
  xAxis: {
    labels: {
      formatter: function() {
        return `<a href="#" class="axis-link">${this.value}</a>`;
      },
      useHTML: true
    }
  }
});

这是最推荐的方案，完全绕开了render事件重复绑定的问题。

方案3：标记已绑定元素，跳过重复绑定

给已绑定事件的元素添加自定义属性，每次render只处理未标记的元素：

Highcharts.chart('container', {
  // 其他图表配置
  xAxis: {
    labels: {
      formatter: function() {
        return `<a href="#" class="axis-link">${this.value}</a>`;
      },
      useHTML: true
    }
  },
  chart: {
    events: {
      render: function() {
        // 只选择未绑定过的元素
        const links = document.querySelectorAll('.axis-link:not([data-bound])');
        links.forEach(link => {
          link.addEventListener('click', (e) => {
            e.preventDefault();
            console.log('点击x轴标签');
          });
          // 添加标记，避免重复绑定
          link.setAttribute('data-bound', 'true');
        });
      }
    }
  }
});

注意：如果xAxis标签在重绘时被完全销毁重建，这个标记会失效，此时方案1或2更可靠。

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