Flot - 检测左键单击和右键单击

Question

我正在使用 Flot 绘制折线图。实时更新，有多个系列。我希望能够检测到图表中各个系列的鼠标左键和右键单击。

目前，我可以检测到鼠标左键单击，但右键单击只会显示浏览器的右键单击菜单。

这是我到目前为止所得到的：

    function myClick(event, pos, obj) {
        if (!obj) { 
            return;
        }
        alert('clicked!');
    }


    var placeholder = $("#placeholder");


    // setup plot
    var options = {
        ...
        grid: {clickable: true, hoverable: true},
        ...
    };


    var initialData = getMyData();

    var plot = $.plot(placeholder,  initialData , options);

    placeholder.bind("plotclick", myClick);

有没有办法检测图表中一系列的右键单击？

Answer 1

查看 float 源，这不是内置功能。它被编码为仅处理网格上的 mousemove、mouseleave 和 click 事件。如果我是你，我会考虑直接修改 flot 源并用 mousedown 事件替换 click 事件。一旦你这样做了，就应该很容易处理左、右、中点击。

编辑

我意识到这是一个旧答案，但我突然想到了一个想法。解决这个问题的方法是在不修改源代码的情况下使用plothover 来监视鼠标是否位于某个点上，然后将通用的mousedown 处理程序绑定到plot div。

var currentPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
    if (item) {
        currentPoint = item;
    } else {
        currentPoint = null;               
    }
});

$('#placeholder').mousedown(function(event) {
   if (currentPoint)
   {
      switch (event.which) {
        case 1:
            alert('Left mouse button pressed on ' + currentPoint.series.label);
            break;
        case 2:
            alert('Middle mouse button pressed on ' + currentPoint.series.label);
            break;
        case 3:
            alert('Right mouse button pressed on ' + currentPoint.series.label);
            break;
        default:
            alert('You have a strange mouse on ' + currentPoint.series.label);
      }
   }
});

请参阅此处的小提琴。