flot plotpan vs plotclick：如何在平移時忽略點擊事件？

在我的Flot應用中，我啓用了plotclick和plotpan事件。然而，我發現，每次當平移情節，plotclick事件也觸發？我想知道如何在平移操作打開時忽略點擊事件？即在平移時僅觸發平移事件監聽器，僅在點擊時觸發單擊事件監聽器。flot plotpan vs plotclick：如何在平移時忽略點擊事件？

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8"> 
    <title>Flot Examples</title> 
    <link href="http://people.iola.dk/olau/flot/examples/layout.css" rel="stylesheet" type="text/css"> 
    <!--[if lte IE 8]><script language="javascript" type="text/ 
javascript" src="http://people.iola.dk/olau/flot/excanvas.min.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="http:// 
people.iola.dk/olau/flot/jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="http:// 
people.iola.dk/olau/flot/jquery.flot.js"></script> 
    <script language="javascript" type="text/javascript" src="http:// 
people.iola.dk/olau/flot/jquery.flot.navigate.js"></script> 
<script type="text/javascript"> 
$(function() { 
    // generate data set from a parametric function with a fractal 
    // look 
    function sumf(f, t, m) { 
     var res = 0; 
     for (var i = 1; i < m; ++i) 
      res += f(i * i * t)/(i * i); 
     return res; 
    } 
    var d1 = []; 
    for (var t = 0; t <= 2 * Math.PI; t += 0.01) 
     d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]); 
    var data = [ d1 ]; 
    var placeholder = $("#placeholder"); 
    var options = { 
     series: { lines: { show: true }, shadowSize: 0 }, 
     xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, 
     yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, 
     zoom: { 
      interactive: true 
     }, 
     pan: { 
      interactive: true 
     }, 
       grid : { 
         autoHighlight : false, 
         hoverable : true, 
         clickable : true, 
       } 
    }; 
    var plot = $.plot(placeholder, data, options); 
    // show pan/zoom messages to illustrate events 
    placeholder.bind('plotpan', function (event, plot) { 
     var axes = plot.getAxes(); 
     $(".message").html("Panning to x: " + 
axes.xaxis.min.toFixed(2) 
          + " &ndash; " + axes.xaxis.max.toFixed(2) 
          + " and y: " + axes.yaxis.min.toFixed(2) 
          + " &ndash; " + axes.yaxis.max.toFixed(2)); 
    }); 
    placeholder.bind('plotclick', function (event, pos, item) { 
     alert('click'); 
    }); 
}); 

</script> 
<body> 
<div id="placeholder" style="width:600px;height:300px;"></div> 
</body> 
</html>

來源

2011-12-07 Simon

我不能想出一個很好的方法來做到這一點，所以仔細檢查給你的任何其他答案。具體而言，我懷疑在畫布上直接綁定事件是一個好主意，並且使用調用來處理平移和點擊很不好。

這是它在行動的工作：http://jsfiddle.net/ryleyb/RFeEt/

我所做的就是綁定的是海軍報創建畫布上的drag和dragend功能，並設置一個全局變量，讓你知道，一個鍋發生。平底鍋結束後，它會等待100毫秒，然後關閉panning變量，這將停止發生點擊操作。

var panning = false; 
$('#placeholder canvas').bind('drag',function(){ 
    panning = true; 
}); 
$('#placeholder canvas').bind('dragend',function(){ 
    setTimeout(function() {panning = false; }, 100); 
}); 
placeholder.bind('plotclick', function (event, pos, item) { 
    if (!panning){ 
     $('.message').append('plotclick triggered<br>'); 
    } 
});

來源

2011-12-07 19:13:09 Ryley

謝謝！它的工作原理，但我不確定這是否是最佳做法！ – Simon

flot plotpan vs plotclick：如何在平移時忽略點擊事件？

回答

相關問題