焦点事件不会冒泡到 Highcharts 中的父级

Question

请看下面的代码；

const wrapper = document.getElementById("wrapper");
wrapper.tabIndex = 0;
wrapper.onfocus = e => {
    console.log("focus event triggered");
}
wrapper.oncontextmenu = e => {
    console.log("context menu event triggered");
}
Highcharts.chart('container', {

    title: {
        text: 'Focus'
    },

    xAxis: {
        categories: ['Foo', 'Bar', 'Foobar'],
    },

    series: [{
        data: [29.9, 71.5, 106.4]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="wrapper" style="height: 400px; width: 500px">
    <div id="container" style="height: 400px; width: 500px"></div>
</div>

点击图表时不会发生焦点事件。但是，如果我右键单击图表以显示上下文菜单，则会发生焦点事件。你能帮我解决这个问题吗？

Answer 1

问题与此问题相关：https://github.com/highcharts/highcharts/issues/11824

并且是在onContainerMouseDown方法中调用e.preventDefault造成的：https://github.com/highcharts/highcharts/blob/61419f1d60b0e0fb069569e23e609e12b1943ea5/ts/Core/Pointer.ts#L1232

作为解决方法，添加以下插件：

(function(H) {
    H.wrap(H.Pointer.prototype, 'onContainerMouseDown', function(proceed) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        document.getElementById("wrapper").focus();
    });
}(Highcharts));

现场演示： http://jsfiddle.net/BlackLabel/L08nagq4/

文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

焦点事件不会冒泡到 Highcharts 中的父级

Focus event does not bubble up to the parent in Highcharts

javascript

highcharts