Flot-检测左键单击和右键单击 [英] Flot - Detect left-click and right-click

问题描述

我正在使用Flot绘制折线图.它是实时更新的，并且有多个系列.我希望能够检测到图形中各个系列的鼠标左键和鼠标右键.

I'm drawing a line graph using Flot. It's updated in real-time and has multiple series. I want to be able to detect left and right mouse clicks on individual series in the graph.

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

Currently, I can detect a left mouse click, but right-click just brings up my browser's right-click menu.

这是到目前为止我得到的:

Here's what I've got so far:

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

有没有一种方法可以检测图中系列的右键单击?

Is there a way to detect right-clicks on a series in the graph?

推荐答案

看看flot源，这不是内置功能.它被编码为仅处理网格上的mousemove，mouseleave和click事件.如果您是我，我会考虑直接修改flot源，并用mousedown事件替换click事件.完成此操作后，应该很容易处理左右点击与居中点击.

Looking at the flot source, this is not a built-in feature. It is coded to handle only the mousemove, mouseleave, and click events on the grid. If I were you I would look into modifying the flot source directly and replacing the click event with the mousedown event. Once you do that it should be easy to handle left vs right vs center clicks.

编辑

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

I realize this is an old answer but a thought occurred to me. A work around for this, without modifying the source, is to use the plothover to monitor whether the mouse is over a point and then bind a generic mousedown handler to the 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);
      }
   }
});

请参见小提琴此处.

这篇关于Flot-检测左键单击和右键单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！