flot plotpan vs plotclick: как игнорировать событие клика при включенном панорамировании? - PullRequest
Новая
       47

flot plotpan vs plotclick: как игнорировать событие клика при включенном панорамировании?

4 голосов
/ 07 декабря 2011

В моем приложении Flot я включил события plotclick и plotpan.Тем не менее, я обнаружил, что каждый раз, когда панорамирование графика, событие 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>

1 Ответ

6 голосов
/ 07 декабря 2011

Я не могу придумать хороший способ сделать это, поэтому внимательно изучите любые другие ответы, которые вам даны. В частности, я сомневаюсь, что связывание событий непосредственно на холсте - хорошая идея, и использование вызова setTimeout для панорамирования и щелчка - просто плохо.

Вот оно работает в действии: http://jsfiddle.net/ryleyb/RFeEt/

Все, что я сделал, это связал функции drag и dragend на холсте, который создает flot, и установил глобальную переменную, чтобы вы знали, что происходит панорамирование. После того, как панорамирование закончится, он ждет 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>'); 
    }
});
...