Question

我在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访问网站时，除了上面指定的点击操作行为异常外，所有内容都完美呈现。

如果我尝试触摸任何条形图项目，不警告'您已触发点击操作' - 好像什么也没发生。

但是，当我尝试点击（触摸）图表的空格时，警报消息会正常触发。

有什么想法吗？

Answer 1

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

此调用将onClick处理程序附加到整个事件画布。（此事件画布具有绘图的大小，并且应该在所有其他画布上方工作 - 这意味着您可能需要手动修改它的z-index以使其工作）。我认为你的情况是这样的：

您正在将“myClickHandler”方法附加到事件画布。每次点击事件画布时都会触发它，无论在哪里 - 在系列上或在剧情的背景上。
在条形图渲染器的情况下，此事件画布位于系列画布下方（或者在系列画布之前创建，或者它具有较低的z-index）。解决方案是手动增加创建AFTER图表后事件画布的z-index。在此之后它将位于顶部并且点击事件将被正确处理。
请记住，无论在何处，此点击事件都会在图表上的每次点击时触发。解决方案是过滤“myClickHandler”方法的执行，如下所示：

代码：

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

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

希望这有帮助

Answer 2

我不了解jqplot，但一般来说，触摸设备上的mousedown和click事件之间会发生更多事情。在click事件本身最终触发之前，“失去”点击的可能性更大。 mousedown，或者在你的情况下'jqplotMouseDown`，对你来说可能是更好的选择。

Answer 3

您应该能够通过完全按照@PriorityMark建议来解决此问题，即明确设置z-index上jqplot-event-canvas的值。

显示了可能的方式，例如，in this answer问题具有类似性质。在我最初的更改之后，即在jqplot-overlayCanvas-canvas后面发送jqplot-series-canvas我忘记将jqplot-event-canvas放在前面。

jqPlot系列上的jqplotClick事件（iOS设备Safari浏览器）

3 个答案: