如何将鼠标悬停事件监听器添加到Highcharts的xAxis区域?

Question

我在Highcharts的.highcharts-xaxis-labels类中添加了mouseover事件监听器。然而，console.log仅当鼠标悬停在<text>上时，而不是.highcharts-xaxis-labels类的其余部分。

我如何添加事件监听器，使它的console.log鼠标在所有的.highcharts-xaxis-labels类，而不仅仅是在<text>类内?那就是className为.highcharts-xaxis-labels的<g>。

实例:https://jsfiddle.net/simazargar/sv9e1g5x/9/

Highcharts.chart('container', {
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}, chart => {
document.querySelector('.highcharts-xaxis-labels')
.addEventListener('mouseover', function(e) {
console.log('mouseover');
});
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>

Answer 1

可以设置.highcharts-xaxis-labelsCSS类的pointer-events: bounding-boxstyle:

.highcharts-xaxis-labels {
pointer-events: bounding-box;
}

---

现场演示:https://jsfiddle.net/BlackLabel/bmykcLew/

实用线程:jQuery click isn't触发SVG但是对于子元素

Answer 2

我认为这是不可能的，除非我们有一个新的<rect>和一个新的className，如.highcharts-xaxis-box，这也将允许这个区域的样式，而不仅仅是标签(类似于Highcharts的传奇)。

我将要求一个新功能https://github.com/highcharts/highcharts/issues/18082