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

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

<强> EDITS

我意识到这是一个古老的答案，但我想到了一个想法。在不修改源代码的情况下解决这个问题的方法是使用plothover监视鼠标是否超过某个点，然后将通用的mousedown处理程序绑定到绘图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);
      }
   }
});

请参阅小提琴here。

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

1 个答案: