ExtJS + JQuery/Flot:绘图容器的mousedown事件
ExtJS + JQuery/Flot:绘图容器的mousedown事件
提问于 2011-04-20 22:22:35
我意识到在flot事件中，"plotpan“事件和"mousedown”事件之间存在着冲突。如果启用了绘图盒，那么鼠标向下操作将无法在绘图区域工作；同时，如果禁用"plotpan“事件，但启用" plotclick”事件和" mousedown“事件，则结果显示只有鼠标向下工作，而plotclick不起作用。我如何确保这三个或更多的事件能够以一种更均衡的方式工作？演示代码附后如下：
<html>
<head>
<title>A Test Page</title>
<!-- JQUERY/FLOT LIB FILES -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="lib/jquery/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.flot.js"></script>
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.flot.navigate.js"></script>
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.flot.symbol.js"></script>
<script type="text/javascript">
$(function () {
// raw data
d1 = [ [ 0, 2 ], [ 1, 2 ] ];
d2 = [ [ 2, 2 ], [ 4, 2 ] ];
//event data
dataSeries = [{
color : "rgb(0, 0, 0)",
data : d1,
label : "point1",
points : {
show : true,
symbol : "square",
radius : 4
}
}, {
color : "rgb(255, 100, 123)",
data : d2,
label : "point2",
points : {
show : true,
radius : 4
}
}];
//container for graph
var placeholder = $("#flotDiv");
if (placeholder.length <= 0) {
return;
}
options= {//graph options
pan : {
interactive : true
},
grid: {
clickable:true
}
};
$.plot(placeholder, dataSeries, options);
placeholder.bind("mousedown",function(e){
alert("mousedown");
})
/*
placeholder.bind("plotclick",function(event, pos, item){
alert("plotclick");
});
*/
});
</script>
</head>
<body>
<!-- SLD PLOT -->
<div id="flotDiv" style="width: 600px; height: 300px; padding: 0px; position: relative;"></div>
</body>
</html>在上面的代码中，鼠标向下事件不起作用，因为我启用了plot pannable；如果我禁用plotpan，那么鼠标下移就会工作；如果我启用plotclick，仍然只有鼠标向下工作；我知道plotpan和plotclick都与" mousedown“事件相关，所以在这个事件之间存在冲突。然而，我需要找到一个方法，让他们一起工作。
谢谢你的评论！
回答 1
Stack Overflow用户
发布于 2013-11-04 11:28:44
插件jquery.flot.navigate.js用于缩放和平移第三方插件jquery.event.drag.js，这将取消鼠标向下传播。解决方案可以是返回鼠标向下事件中的真，以允许鼠标向下的事件冒泡。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5737347
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号