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!

回答1:

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.

来源：https://stackoverflow.com/questions/5737347/extjs-jquery-flot-mousedown-event-for-the-plot-container

标签

plot

mouseevent

flot

extjs

pan