You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Highcharts无障碍适配:为点击事件添加Enter、Spacebar键盘触发支持

Highcharts 回车/空格键触发点击事件适配方案
  • 先确认已引入无障碍模块:全量引入Highcharts时默认包含该模块,按需引入场景需要单独导入highcharts/modules/accessibility并初始化。
  • 调整配置逻辑,将公共触发逻辑抽离复用,同时新增键盘按键监听,完整配置参考如下:
// 抽离公共交互逻辑,避免重复编码
const handlePointAction = function(e) {
  alert(this.series.name + " clicked")
  const point = e.point;
  this.goToBackgroundData(point.answerId);
}

const highchartsConfig = {
  // 开启无障碍支持,必须配置项
  accessibility: {
    enabled: true,
    keyboardNavigation: {
      enabled: true
    }
  },
  plotOptions: {
    series: {
      allowPointSelect: false,
      cursor: 'pointer',
      events: {
        click: handlePointAction,
        // 新增键盘事件监听
        keydown: function(e) {
          // 适配Enter键、空格键触发
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            handlePointAction.call(this, e);
          }
        }
      }
    }
  }
}
  • 兼容低版本浏览器可以把e.key判断替换为e.keyCode === 13 || e.keyCode === 32,对应Enter和空格键的按键编码。

内容的提问来源于stack exchange,提问作者fguru

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.06 06:51:01