ExtJS + JQuery/Flot: mousedown event for the plot container
I realized that in flot there is a confliction between "plotpan" event and "mousedown" event. if enable the plot pannable, then mousedown wont work in the plot area; also, if disable "plotpan" event, but enable "plotclick" event and "mousedown" event, it turns out that only mousedown works but plotclick doesnt. how can I make sure that these three or more events can work in a more apporpriate way? demo codes are attached as follows:
<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>
in the above codes, mousedown event doesnt work because i enable plot pannable; if i disable plotpan, then mousedown will work; and if I enable plotclick, still only mousedown works; i know that both plotpan and plotclick are relevant to "mousedown" event, so there is a confliction among. however, i need find a way to make them work together.
appreciate any comments!
The plugin jquery.flot.navigate.js using for zooming and panning third party plugin jquery.event.drag.js which will cancel mousedown propagation. Solution could be to return true inside mousedown event hadler to allow bubbling out the mouse down event.
加载中,请稍侯......
精彩评论