Блог

Главная - Вопросы по программированию - ExtJS jQuery/Flot: событие наведения курсора мыши для графического контейнера

ExtJS jQuery/Flot: событие наведения курсора мыши для графического контейнера

#plot #mouseevent #flot #extjs #pan

#график #mouseevent #flot #extjs #панорамирование

Вопрос:

Я понял, что во 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>

в приведенных выше кодах событие mousedown не работает, потому что я включаю возможность панорамирования plot; если я отключу plotpan, то mousedown будет работать; и если я включу plotclick, по-прежнему будет работать только mousedown; я знаю, что и plotpan, и plotclick имеют отношение к событию «mousedown», поэтому существует конфликт между. однако мне нужно найти способ заставить их работать вместе.

ценю любые комментарии!

Комментарии:

1. Не могли бы вы немного расширить настройки вашего Ext — вероятно, в этом проблема. Дайте нам больше кода или разместите пример где-нибудь в Интернете?

2. Привет, Райли, я снова изменил свой вопрос, добавив целый пример. спасибо за ваше внимание ~

Ответ №1:

Плагин jquery.flot.navigate.js использование для масштабирования и панорамирования стороннего плагина jquery.event.drag.js которое отменит распространение наведения курсора мыши. Решением могло бы быть возвращение true внутри обработчика событий mousedown, чтобы разрешить вывод события mouse down.