将事件绑定到右键答案

【问题标题】：Bind event to right-click将事件绑定到右键
【发布时间】：2012-02-09 15:26:18
【问题描述】：

如何绑定或识别右键单击事件？

我有一个散点图，左键单击在单击的位置添加一个点；我想右键单击以删除该点（如果存在）。

这是我当前的代码：

var chart = new Highcharts.Chart({
   chart: {
       renderTo: 'container',
       events: {
           click: function(event) {
               var cs = [Math.floor(event.xAxis[0].value),
                         Math.floor(event.yAxis[0].value)];
               this.series[0].addPoint(cs);
           }
       },
        type: 'scatter',

   },
   ... etc. ...
});

【问题讨论】：

标签： event-handling highcharts right-click

【解决方案1】：

这应该会有所帮助：Making Highcharts support right click context menu

【讨论】：

我很欣赏 LMGTFY 的尝试，但这并没有真正的帮助 -- 1) 我不想修补 HighCharts，因为我希望能够使用未来的版本和 2) 我不想想要一个上下文菜单。

【解决方案2】：

这不是一个完整的解决方案：我没有弄清楚如何捕获右键单击事件。

但这里有一个点击图表背景的解决方法：

让用户按住 shift 单击
像以前一样提供回调
在回调中，检查事件。如果按下 shift，请执行不同的操作

以下是回调的样子：

function clickChart(event) {
    var isShiftPressed = event.shiftKey;
    if(isShiftPressed) {
        // do something
    } else {
        // do something different
}

事件对象具有布尔属性shiftKey（和altKey）。

这是删除点的解决方法：（实际上，这不是解决方法——我只是没有意识到还有更简单的方法！）

点有自己的事件
只需设置一个回调，当点被点击时删除它们

例子：

function clickPoint(event) {
    this.remove();
}

var chart = new Highcharts.Chart({
    chart: {
        type: 'scatter',
        renderTo: 'chart',
    },
    series: [{
         point: {
             events: {
                 click: clickPoint
             }
         }
    }]
});

注意：文档至少具有误导性，但 jsfiddle 示例似乎是正确的。这似乎表明point 选项在series 中不是。

【讨论】：

【解决方案3】：

目前，Highcharts 支持的事件很少。供参考：https://www.highcharts.com/blog/tutorials/introduction-to-highcharts-events/

添加自定义事件，如

双击（包括移动设备）
右键单击（上下文菜单）
鼠标悬停
鼠标移开
鼠标向下
鼠标移动

我们可以添加一个插件

highcharts-custom-events

https://www.npmjs.com/package/highcharts-custom-events

希望这对您有所帮助并解决您的问题。

【讨论】：