ExtJS + JQuery/Flot: mousedown event for the plot container_问答_开发者

ExtJS + JQuery/Flot: mousedown event for the plot container

开发者 https://www.devze.com 2023-02-27 22:00 出处：网络

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\" e

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.