HighCharts: Mouse click event is handled by both Series handler and Point handler

Question

I have defined mouse click event handler for Series and also for 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');
                }
            }
        }
    }
},

My requirement is that when user clicks on line, then only line click event handler should be called and point event handler should not be called; and vice-versa. Right now, no matter where you click on the line (either on point or on line between points), both event handlers are being called. What additional options I need to provide?

https://jsfiddle.net/my2wm725/

Answer 1

The method that fires these events is called onContainerClick. It fires them both; series event is fired first then the point event. It looks like this:

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


    }
},

So this is a wrapper for the onContainerClick method I wrote to fire only one event at a time:

(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)

Working example:

(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>

Answer 2

A workaround is to use jQuery to listen click events on points and listening to click events on line from highcharts handler:

jQuery point click event handler:

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

Highcharts series click handler:

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

Check this fiddle: https://jsfiddle.net/beaver71/ysnc4sk8/