如何获取Highcharts右键菜单点击元素ID及触发点击函数两次的方法

嘿，针对你关于Highcharts右键菜单的两个问题，我来给你详细解答下：

Highcharts的右键菜单（上下文菜单）不管是默认项还是自定义项，都可以通过监听点击事件来获取被点击元素的ID。这里有两种实用的方法：

• 方法一：监听菜单容器的点击事件
  图表加载完成后，找到右键菜单的容器（类名为highcharts-contextmenu），给它绑定点击事件，然后通过事件对象定位到被点击的菜单项，进而获取ID：

  Highcharts.chart('container', {
    chart: {
      events: {
        load: function() {
          const menuContainer = document.querySelector('.highcharts-contextmenu');
          if (menuContainer) {
            menuContainer.addEventListener('click', (e) => {
              const clickedItem = e.target.closest('.highcharts-menu-item');
              if (clickedItem) {
                const itemId = clickedItem.id;
                console.log('被点击的菜单项ID:', itemId);
                // 这里可以加入你的业务逻辑
              }
            });
          }
        }
      }
    },
    // 其他图表配置...
  });
  

  默认菜单项的ID是有规律的，比如下载PNG的ID是highcharts-download-png，下载JPEG是highcharts-download-jpeg，你可以打开浏览器开发者工具直接查看元素确认。

• 方法二：自定义菜单项时直接绑定ID并在点击回调中获取
  如果你是自定义右键菜单项，可以在定义时直接设置id属性，然后在onclick回调里处理逻辑：

  Highcharts.chart('container', {
    navigation: {
      menuItems: [
        {
          text: '我的自定义按钮',
          id: 'custom-menu-btn',
          onclick: function() {
            console.log('当前点击的按钮ID:', 'custom-menu-btn');
            // 这里可以加入你的业务逻辑
          }
        },
        // 保留默认菜单项
        'downloadPNG',
        'downloadJPEG'
      ]
    },
    // 其他图表配置...
  });
  

关于获取被点击按钮的ID #

其实这个和问题1的解决方案完全一致，用上面提到的两种方法就能轻松拿到ID，这里就不再重复啦。

关于触发点击函数两次 #

分两种场景来处理：

• 场景一：点击菜单项时自动执行两次逻辑
  如果是自定义菜单项，最简单的方式就是在onclick回调里直接调用两次目标函数：

  {
    text: '触发两次的按钮',
    id: 'double-action-btn',
    onclick: function() {
      // 直接执行两次逻辑
      console.log('执行第一次操作');
      console.log('执行第二次操作');
      // 或者调用同一个自定义函数两次
      this.handleCustomAction();
      this.handleCustomAction();
    }
  }
  

  如果是默认菜单项，可以先找到它的默认点击函数，然后手动调用两次：

  // 在chart的load事件中监听菜单点击
  menuContainer.addEventListener('click', (e) => {
    const clickedItem = e.target.closest('.highcharts-menu-item');
    if (clickedItem && clickedItem.id === 'highcharts-download-png') {
      // 找到默认的下载PNG函数
      const downloadFunc = Highcharts.getOptions().navigation.menuItems.find(item => item.text === 'Download PNG').onclick;
      // 调用两次
      downloadFunc.call(this);
      downloadFunc.call(this);
    }
  });
  

• 场景二：手动触发菜单项的点击事件两次
  如果你想在外部代码中主动触发某个菜单项的点击两次，可以直接获取该元素，然后调用两次click()方法：

  // 比如获取下载JPEG的按钮并触发两次点击
  const jpegBtn = document.getElementById('highcharts-download-jpeg');
  if (jpegBtn) {
    jpegBtn.click();
    jpegBtn.click();
  }
  

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