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

Question

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?

Answer 1

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.

EDITS

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

See fiddle here .