HighCharts：鼠标单击事件由Series处理程序和Point处理程序处理

Question

我已经为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');
                }
            }
        }
    }
},

我的要求是当用户点击线路时，应该只调用线路点击事件处理程序并且不应该调用点事件处理程序;反之亦然。现在，无论你在哪里点击（在点之间或在点之间的线上），都会调用两个事件处理程序。我需要提供哪些其他选项？

https://jsfiddle.net/my2wm725/

Answer 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/

Answer 2

触发这些事件的方法称为MERGE dbo.Destination AS TARGET USING dbo.staging AS SOURCE ON (TARGET.[id] = SOURCE.[id]) WHEN MATCHED THEN UPDATE SET TARGET.[shortName] = SOURCE.[shortName] WHEN NOT MATCHED BY TARGET THEN INSERT ( [Id] ,[Name] ,[shortName] ) VALUES ( SOURCE.[Id] ,SOURCE.[Name] ,SOURCE.[shortName] ) 。它们两个都是它们;系列事件先触发点事件。它看起来像这样：

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

工作示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;