Highcharts点击事件适配键盘导航并获取事件数据需求

当前代码中的click事件仅支持鼠标触发，要实现键盘导航（Tab聚焦后回车/空格触发）并保留事件数据获取能力，可通过以下两种方案实现：

方案一：直接在点事件中添加键盘监听 #

通过给point.events添加keyup事件，同时开启可访问性配置让点元素可聚焦：

plotOptions: {
    series: {
        point: {
            events: {
                click: function(e) {
                    console.log('point clicked!')
                    console.log('point e: ', e);
                },
                mouseOver: function() {
                    console.log('point mouse over!');
                },
                // 监听键盘回车/空格触发点击
                keyup: function(e) {
                    if (e.keyCode === 13 || e.keyCode === 32) {
                        this.click(e); // 复用点击逻辑并传递键盘事件数据
                    }
                }
            }
        },
        // 开启可访问性，设置点可聚焦
        accessibility: {
            enabled: true,
            point: {
                tabindex: 0
            }
        }
    }
}

方案二：图表加载后绑定DOM键盘事件 #

若方案一未生效，可在图表加载完成后，直接给点的DOM元素绑定键盘事件：

chart: {
    events: {
        load: function() {
            this.series.forEach(series => {
                series.points.forEach(point => {
                    point.graphic.element.addEventListener('keyup', e => {
                        if (e.keyCode === 13 || e.keyCode === 32) {
                            point.firePointEvent('click', e); // 触发点击事件并传递键盘事件数据
                        }
                    });
                });
            });
        }
    }
},
plotOptions: {
    series: {
        point: {
            events: {
                click: function(e) {
                    console.log('point clicked!')
                    console.log('point e: ', e);
                },
                mouseOver: function() {
                    console.log('point mouse over!');
                }
            }
        },
        accessibility: {
            enabled: true,
            point: {
                tabindex: 0
            }
        }
    }
}

注意事项 #

• 需确保使用的Highcharts版本支持可访问性配置（v6.0及以上版本）；
• 测试时通过Tab键导航到目标点元素，按下回车或空格键即可触发点击逻辑，控制台会输出对应的事件数据。

内容的提问来源于stack exchange，提问作者alu-ms