ExtJS + JQuery/Flot：绘图容器的 mousedown 事件答案

【问题标题】：ExtJS + JQuery/Flot: mousedown event for the plot containerExtJS + JQuery/Flot：绘图容器的 mousedown 事件
【发布时间】：2011-04-20 22:22:35
【问题描述】：

我意识到在 flot 中“plotpan”事件和“mousedown”事件之间存在冲突。如果启用绘图可平移，则 mousedown 将无法在绘图区域工作；此外，如果禁用“plotpan”事件，但启用“plotclick”事件和“mousedown”事件，结果证明只有 mousedown 有效，而 plotclick 无效。我怎样才能确保这三个或更多事件可以以更合适的方式工作？附上demo代码：

<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>

在上面的代码中，mousedown 事件不起作用，因为我启用了 plot pannable；如果我禁用 plotpan，那么 mousedown 将起作用；如果我启用 plotclick，仍然只有 mousedown 有效；我知道 plotpan 和 plotclick 都与“mousedown”事件相关，因此它们之间存在冲突。但是，我需要找到一种方法让它们一起工作。

感谢任何 cmets！

【问题讨论】：

您能否扩展一下您的 Ext 设置 - 这可能是问题所在。给我们更多代码，或者在互联网的某个地方放一个例子？
嗨 Ryley，我通过添加整个示例再次更改了我的问题。感谢您的关注~

标签： plot mouseevent flot extjs pan

【解决方案1】：

插件 jquery.flot.navigate.js 用于缩放和平移第三方插件 jquery.event.drag.js，它将取消 mousedown 传播。解决方案可能是在 mousedown 事件处理程序中返回 true 以允许冒泡鼠标按下事件。

【讨论】：