All geek questions in one place

Flot plotpan vs plotclick: how to ignore the click event when panning is enabled?

In my Flot app, I enabled the events plotclick and plotpan. However, I found that every time the plot panorama, the plotclick event also fires? I am wondering how to ignore the click event when working in pan mode enabled? those. only trigger the panorama event receiver when it is in pan mode, only trigger click the event listen button when clicked.

<!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>
+4
source share
1 answer

I can't think of a good way to do this, so carefully study any other answers that are given to you. In particular, I doubt that binding events directly to the canvas is a good idea, and using the setTimeout call to handle panning and clicking is simply bad.

Here it works in action: http://jsfiddle.net/ryleyb/RFeEt/

All I did was connect the drag and dragend on the canvas that the fleet creates and set a global variable so that you know that the pan is happening. After panning is complete, it waits for 100 ms before disabling the panning variable, which will stop the action of your click.

 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>'); } });
+6
source

Source: https://habr.com/ru/post/1385157/

More articles:


All Articles