Flot PlotPan vs PlotBlick: come ignorare l'evento Click quando è acceso?

StackOverflow https://stackoverflow.com/questions/8418785

Domanda

Nella mia app FLOT, ho abilitato eventi PlotBlick e PlotPan. Tuttavia, ho scoperto che ogni volta che viene attivato anche l'evento della trama? Mi chiedo come ignorare l'evento Click quando è accesa? cioè, attivare solo l'ascoltatore di eventi di panoramica quando è in pan, scatenare solo ascoltatore di eventi quando fai clic. 

<!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>
È stato utile?

Soluzione

Non riesco a trovare un buon modo per farlo, quindi esamina attentamente qualsiasi altra risposta che ti viene data. In particolare, dubito che vincere gli eventi direttamente sulla tela sia una buona idea e usando un setTimeout Chiama per affrontare il panoramica e il clic è semplicemente male.

Ecco che funziona in azione: http://jsfiddle.net/ryleyb/rfeet/

Tutto quello che ho fatto è stato legare il drag e dragend Funzioni sulla tela che Flot crea e imposta una variabile globale per farti sapere che sta accadendo una padella. Dopo la fine della padella, aspetta 100 ms prima di spegnere il panning Variabile, che impedirà l'azione dell'azione del clic.

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>'); 
    }
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top