14

我在执行 jqPlot 项目上的操作点击时遇到了一些问题,我希望其他人能对出了什么问题有所了解。

我有一个用 jqPlot 呈现的条形图,它使用以下代码将点击事件处理程序附加到(在 jqPlot 图表上):

$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);

myClickHandler 看起来像这样:

function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
  alert('you have triggered click action');
}

我的意图是通过使用这个简单的 jqPlot 实现,当单击图表内的区域(包括条形图项)时,将触发警报操作。这在任何桌面浏览器(IE6/7/8/9、Chrome、Safari)中都能完美运行。

但是,我遇到的问题是,当我使用 iPhone/iPad 访问该站点时,除了上面指定的单击操作行为异常之外,一切都完美呈现。

如果我尝试触摸任何条形图项目,它不会提醒“您已触发点击操作” -就好像什么都没发生一样

但是,当我尝试单击(触摸)图表的空白区域时,警报消息会正常触发。

有任何想法吗?

4

3 回答 3

1
$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);

此调用会将 onClick 处理程序附加到整个事件画布。(此事件画布具有绘图的大小,应该高于所有其他画布才能工作 - 这意味着您可能需要手动修改它的 z-index 才能使事情正常工作)。我认为你的情况是这样的:

  1. 您正在将“myClickHandler”方法附加到事件画布。每次单击事件画布时都会触发它,无论在哪里 - 在系列或情节的背景上。

  2. 在使用条形图渲染器的情况下,此事件画布位于系列画布下方(要么在系列画布之前创建,要么具有较低的 z-index)。解决方案是在创建图表后手动增加事件画布的 z-index。在此之后,它将位于顶部,并且单击事件将被正确处理。

  3. 请记住,无论在何处,每次单击该图时都会触发此单击事件。解决方案是过滤“myClickHandler”方法的执行,如下所示:

代码:

function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
    if (isClickEventOverTheSeries(gridpos)) {
        alert('you have triggered click action');
    }
}

在此示例中, gridpos是包含 2 个点的数组 - 单击事件的 x 和 y 坐标。“ isClickEventOverTheSeries ”方法是检查在该坐标下是否绘制了系列的函数。我不确定如何使用 BarChart 渲染器来实现这一点 - 我从未使用过它,但是使用线条渲染有一种方法可以检查它......

希望这可以帮助

于 2012-12-17T16:26:24.720 回答
0

我不知道 jqplot,但一般来说,在触摸设备上还有更多的中间事件mousedown和事件。clickclick事件本身最终触发之前“失去”点击的可能性更大。mousedown,或者在您的情况下为“jqplotMouseDown”,对您来说可能是一个更好的选择。

于 2012-03-20T23:31:39.163 回答
0

您应该能够通过完全按照@PriorityMark 的建议来解决这个问题,即通过明确z-index设置jqplot-event-canvas.

例如,在这个问题具有相似性质的答案中显示了它可能完成的方式。在我最初的更改之后,即发送jqplot-overlayCanvas-canvas后面jqplot-series-canvas我忘了把jqplot-event-canvas前面。

于 2012-05-24T16:16:32.497 回答