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

Posted 2023-03-14

【中文标题】jqplot系列上的jqplotClick事件（iOS设备Safari浏览器）

【英文标题】：jqplotClick event on jqPlot series (iOS devices Safari browser)

【发布时间】：2011-02-25 06:02:32

【问题描述】：

我在 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 访问该站点时，除了上面指定的单击操作行为异常之外，一切都完美呈现。

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

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

有什么想法吗？

【问题讨论】：

这是一个旧帖子，我意识到这一点。但是，它还没有修复，您是否检查过事件画布的 z-index 是否高于其他画布项？由于所有画布在 jqplot 中都处于同一层次结构级别，因此条形画布可能只是呈现在另一个画布的前面，并导致您无法获取事件。

您可以尝试绑定到touchstart 或touchend 看看它是否有效？如果这行得通，那么您的一个元素正在吞噬触摸并且它不会冒泡。

【参考方案1】：

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

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

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

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

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

代码：

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

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

希望对你有帮助

【参考方案2】：

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

【参考方案3】：

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

显示了可能完成的方式，例如，in this answer，其中问题的性质相似。在我最初的更改之后，即在jqplot-series-canvas 后面发送jqplot-overlayCanvas-canvas 我忘了把jqplot-event-canvas 放在前面。