Flot - Detect left-click and right-click

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?

http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery/2725963#2725963 — NimChimpsky, Oct 04 '11 at 09:33
This isn't really a flot question, you're asking if Javascript can detect right clicks, which has been covered [many times](http://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event). [Searching is your friend](http://stackoverflow.com/search?q=%5Bjavascript%5D+detect+right+clicks&submit=search)! — Alex, Oct 04 '11 at 09:34
Sorry, I should be a little bit more clear. I want to detect left and right clicks on series of the flot graph, not anywhere on the page. — , Oct 04 '11 at 10:16
Well you say you're able to "detect a left mouse click", so you surely just apply the links above to detect a right click? — Alex, Oct 05 '11 at 11:15

Mark · Accepted Answer · 2013-12-17T20:26:57.070

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.

Flot - Detect left-click and right-click

1 Answers1

Linked