2011-10-04 140 views
0

我正在使用Flot繪製折線圖。它實時更新並有多個系列。我希望能夠在圖形中檢測單個系列上的鼠標左鍵和右鍵單擊。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); 

有沒有一種方法來檢測圖中的一系列右鍵點擊?

+0

http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery/2725963#2725963 – NimChimpsky

+0

這不是一個真正的問題,你問是否可以檢測到右鍵點擊,這已被覆蓋[很多次](http://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event)。 [搜索是你的朋友](http://stackoverflow.com/search?q=%5Bjavascript%5D+detect+right+clicks&submit=search)! – Alex

+0

對不起,我應該更清楚一點。我想要在頁面上的任何位置檢測一系列flot圖的左右點擊。 – Peter

回答

2

看看flot源,這不是一個內置的功能。它被編碼爲只處理網格上的mousemove,mouseleave和click事件。如果我是你,我會直接修改flot源並用mousedown事件替換click事件。一旦你這樣做,應該很容易處理左,右和中心點擊。

編輯

我意識到這是一個古老的答案,但一個念頭出現在我。解決此問題的方法是在不修改源代碼的情況下使用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