个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
31
4
在我的 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)
+ " – " + 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>
最佳答案
我想不出一个好的方法来做到这一点，所以仔细检查给你的任何其他答案。具体来说，我怀疑直接在 Canvas 上绑定(bind)事件是个好主意，并使用 setTimeout调用来处理平移和点击是很糟糕的。
实际效果如下:http://jsfiddle.net/ryleyb/RFeEt/
我所做的只是绑定(bind)drag和 dragend在 flot 创建的 Canvas 上运行函数，并设置一个全局变量以让您知道正在发生平移。平底锅结束后，它会等待 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>');
}
});
关于click - flot plotpan vs plotclick : how to ignore click event when panning is on?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8418785/
31
4
0
所以我有一个 jQuery 方法来捕获 Flot 图表上的点击事件: $("#placeholder").bind("plotclick", function (event, pos, item) {
使用以下代码，在文本区域中的文本被手动更改后，文本区域停止从“plotclick”事件更新。如果你只在textarea中点击但不改变值，textarea会继续更新。即使值已被手动更改，如何使 text
我需要图表中的点击事件。但我还需要允许用户选择要放大的范围。 点击事件已正确注册。但是，在进行选择时，它会同时触发 plotselected 和 plotclick 事件。 如何防止在触发 plots
在我的 Flot 应用程序中，我启用了 plotclick 和 plotpan 事件。然而， 我发现每次平移绘图时，plotclick事件也是 触发？我想知道平移操作时如何忽略点击事件 是吗？即，仅在
通过使用 plothover 事件，我有一个可行的工具提示系统设置和我的正常绘图选项(不使用破折号)，但是当我切换到我的“黑白”模式(使用破折号)时，绘图不可悬停。使用破折号时，有什么方法可以使图表保
我是一名优秀的程序员,十分优秀！