在iOS设备的Safari浏览器上，如何处理jqPlot系列的jqplotClick事件？

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访问网站时，除了上述指定的点击行为外，一切都渲染得很完美，但点击行为表现得很奇怪。

如果我尝试点击任何一个条形图项目，它不会警报“您已触发点击操作”，好像什么也没发生。

然而，当我尝试点击（触摸）图表的空白处时，警报消息就正常触发了。

有任何想法吗？

- Jonathan Liono

---

这是一篇旧帖子，我意识到了。然而，它还没有被修复，你是否检查过事件画布的 z-index 是否比其他画布项更高？由于 jqplot 中所有画布都处于相同的层次结构级别上，因此条形图画布可能只是在其他画布前面呈现，从而导致您无法获取事件。 - PriorityMark

你可以尝试绑定到 touchstart 或 touchend 然后看看是否有效吗？ 如果有效，那么你的某个元素正在占用触摸事件，导致它无法冒泡。 - Gaurav Shah

Answer 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渲染器实现这一点 - 我从未使用过它，但是对于线条渲染器，有一个可以检查它的方法...希望这可以帮助到您。

- Kostadin Mehomiyski

Answer 2

按照 @PriorityMark 的建议，即在 jqplot-event-canvas 上显式设置 z-index 的值，您应该能够解决这个问题。

可以像此答案中所示的那样完成它。在那里，问题是类似的。在我的初始更改之后，即将 jqplot-overlayCanvas-canvas 发送到 jqplot-series-canvas 后面时，我忘记将 jqplot-event-canvas 置于其前面。

- Boro

Answer 3

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

- Petr Vostrel