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
相关产品推荐
相关产品推荐

