flot plotpan vs plotclick: how to ignore click event when panning is on?
-
29-10-2019 - |
题
In my Flot app, I enabled both plotclick and plotpan events. However, I found that every time when pan the plot, the plotclick event is also triggered? I am wondering how to ignore click event when pan operation is on? i.e., only trigger pan event listener when in pan, only trigger click event listener when in click.
<!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)
+ " – " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2)
+ " – " + 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>
解决方案
I can't come up with a good way to do this, so examine closely any other answers that are given to you. Specifically, I doubt that binding the events directly on the canvas is a good idea and using a setTimeout
call to deal with the panning and click is just bad.
Here's it working in action: http://jsfiddle.net/ryleyb/RFeEt/
All I did was bind the drag
and dragend
functions on the canvas that flot creates, and set a global variable to let you know that a pan is happening. After the pan ends, it waits 100ms before turning off the panning
variable, which will stop your click action from being happening.
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>');
}
});