Question

我正在使用最新版本的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,

请参阅：How to capture right click event

Answer 1

From the "cursor" plugin，他们这样处理：

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

<强> EDITS

我可以通过绑定＆＃39; jqplotDblClick＆＃39;来捕获双击。我没有必要推动这项活动。对于错误的方向感到抱歉，我上面的答案意味着该事件已经存在。见工作小提琴here。我添加的唯一附加内容是CSS规则，使div无法选择，因为双击将选择它。

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');
            });
});

jqPlot - 如何捕获双击事件

1 个答案: