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

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/