HighCharts：鼠标点击事件由 Series 处理程序和 Point 处理程序处理答案

【问题标题】：HighCharts: Mouse click event is handled by both Series handler and Point handlerHighCharts：鼠标点击事件由 Series 处理程序和 Point 处理程序处理
【发布时间】：2018-01-09 11:32:59
【问题描述】：

我已经为 Series 和 Point 定义了鼠标点击事件处理程序。

plotOptions: {
    series: {
        cursor: 'pointer',
        events: {
            click: function (event) {
                console.log(event);
                alert('series line clicked');
            }
        },
        point: {
            events: {
                click: function(event) {
                    alert('series point clicked');
                }
            }
        }
    }
},

我的要求是当用户点击在线时，只调用line click event handler，不调用point event handler；反之亦然。现在，无论您单击在线的哪个位置（无论是在点上还是在点之间的线上），都会调用两个事件处理程序。我需要提供哪些额外选项？

https://jsfiddle.net/my2wm725/

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

一种解决方法是使用 jQuery 来监听点上的点击事件，并从 highcharts 处理程序在线监听点击事件：

jQuery 点点击事件处理程序：

$(".highcharts-point").click(function(event) {
    console.log("jQuery point.click",event);
    // the line below avoids propagation event to series click handler
    event.stopPropagation();
})

Highcharts 系列点击处理程序：

plotOptions: {
    series: {
        cursor: 'pointer',
        events: {
            click: function (event) {
                console.log("series.click",event);
            }
        }
    }
},

检查这个小提琴：https://jsfiddle.net/beaver71/ysnc4sk8/

【讨论】：

【解决方案2】：

触发这些事件的方法称为onContainerClick。它把他们俩都烧了；首先触发系列事件，然后触发点事件。它看起来像这样：

onContainerClick: function(e) {
    var chart = this.chart,
        hoverPoint = chart.hoverPoint,
        plotLeft = chart.plotLeft,
        plotTop = chart.plotTop;

    e = this.normalize(e);

    if (!chart.cancelClick) {

        // On tracker click, fire the series and point events. #783, #1583
        if (hoverPoint && this.inClass(e.target, 'highcharts-tracker')) {

            // the series click event
            fireEvent(hoverPoint.series, 'click', extend(e, {
                point: hoverPoint
            }));

            // the point click event
            if (chart.hoverPoint) { // it may be destroyed (#1844)
                hoverPoint.firePointEvent('click', e);
            }

            // When clicking outside a tracker, fire a chart event
        } else {
            extend(e, this.getCoordinates(e));

            // fire a click event in the chart
            if (chart.isInsidePlot(e.chartX - plotLeft, e.chartY - plotTop)) {
                fireEvent(chart, 'click', e);
            }
        }


    }
},

所以这是我编写的 onContainerClick 方法的包装器，每次只触发一个事件：

(function(H) {
  var occ = H.Pointer.prototype.onContainerClick;
  H.Pointer.prototype.onContainerClick = function(e) {
    //if the target has the CSS class of a point fire a point event
    if(e.target.classList.value.indexOf('highcharts-point') >= 0) {
      e = this.normalize(e);
      this.chart.hoverPoint.firePointEvent('click', e);
    }
    //if the target has the CSS class of a series fire a series event
    else if (e.target.classList.value.indexOf('highcharts-tracker') >= 0) {
      e = this.normalize(e);
      H.fireEvent(this.chart.hoverPoint.series, 'click',H.extend(e, {
        point: this.chart.hoverPoint
      }));
    }
    //if neither then call the original onContainerClick
    else {
      occ.call(this, e);
    }
  }
})(Highcharts)

工作示例：

(function(H){
  var occ = H.Pointer.prototype.onContainerClick;
  H.Pointer.prototype.onContainerClick = function(e) {
    if(e.target.classList.value.indexOf('highcharts-point') >= 0) {
      e = this.normalize(e);
      this.chart.hoverPoint.firePointEvent('click', e);
    }
    else if (e.target.classList.value.indexOf('highcharts-tracker') >= 0) {
      e = this.normalize(e);
      H.fireEvent(this.chart.hoverPoint.series, 'click',H.extend(e, {
        point: this.chart.hoverPoint
      }));
    }
    else {
      occ.call(this, e);
    }
  }
})(Highcharts)

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            cursor: 'pointer',
            events: {
                click: function (event) {
                    console.log('series event')                    
                }
            },
            point: {
                events: {
                    click: function(event) {
                        console.log('point event')                    
                    }
                }
            }
        }
    },

    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]
    }]
});

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

<div id="container" style="height: 400px"></div>

【讨论】：