1

我正在使用最新版本的 jqPlot (v1.0.0b2_r1012) 来绘制我的直方图。

为了捕捉单击事件，我使用了“jqplotDataClick”，如下所示：

$('#myHistogram').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
    // Do something
});

是否可以捕获双击事件？

不幸的是，我一直无法在 jqplot.barRenderer.js 中找到这样的事件。

更新：

我对 jqplot.barRenderer.js 文件进行了以下两项更改：

注册 jqplotDblClick 事件

$.jqplot.BarRenderer.prototype.init = function(options, plot) {
    ...
    ...
    plot.postInitHooks.addOnce(postInit);
    plot.postDrawHooks.addOnce(postPlotDraw);
    plot.eventListenerHooks.addOnce('jqplotMouseMove', handleMove);
    plot.eventListenerHooks.addOnce('jqplotMouseDown', handleMouseDown);
    plot.eventListenerHooks.addOnce('jqplotMouseUp', handleMouseUp);
    plot.eventListenerHooks.addOnce('jqplotClick', handleClick);
    plot.eventListenerHooks.addOnce('jqplotDblClick', handleDblClick);
    //$.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]); I've also tried this but without any luck
    plot.eventListenerHooks.addOnce('jqplotRightClick', handleRightClick); 
};

实现handleDblClick函数

function handleDblClick(ev, gridpos, datapos, neighbor, plot) {
    if (neighbor) {
        var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
        var evt = jQuery.Event('jqplotDataDblClick');
        evt.pageX = ev.pageX;
        evt.pageY = ev.pageY;
        plot.target.trigger(evt, ins);
    }
}

然后我在我的 JavaScript 文件中绑定 jqplotDataDblClick，如下所示：

$('#myHistogram').bind('jqplotDataDblClick', function(ev, seriesIndex, pointIndex, data) {
    alert("Ohayo!"); // Good morning in Japanese
});

但是，当我双击我的一个垂直条形图时，不会触发双击事件。我试过绑定“jqplotRightClick”，但这也不起作用。 如果我使用“jqplotClick”，那么一切都按预期工作。

有谁知道我在这里做错了什么？

更新 2：

RE：我试过绑定“jqplotRightClick”，但这也不起作用。（看上面）

我刚刚发现，为了捕捉这个事件，你必须设置以下内容：

captureRightClick: true,

请参阅：如何捕获右键单击事件

4

1 回答 1

1

从“光标”插件，他们处理它是这样的：

if (c.dblClickReset) {
  $.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]);
}

编辑

我可以通过绑定'jqplotDblClick'来捕获双击。我不必推动事件。抱歉误导，我上面的回答是为了表明该事件已经存在。请参阅此处的工作小提琴。我添加的唯一附加内容是使 div 不可选择的 CSS 规则，因为双击会选择它。

HTML：

<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px; -moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"></div>​

JS：

$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;
        var s1 = [2, 6, 7, 10];
        var ticks = ['a', 'b', 'c', 'd'];

        plot1 = $.jqplot('chart1', [s1], {

            seriesDefaults:{
                renderer:$.jqplot.BarRenderer
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                }
            }
        });

        $('#chart1').bind('jqplotDblClick', 
            function (ev, seriesIndex, pointIndex, data) {
                alert('hi');
            });
});
于 2012-05-18T15:27:48.953 回答