I am having some issues performing action clicks on jqPlot items, and I am hoping someone else can shed some light on what is going wrong.
我在jqPlot项目上执行动作点击时遇到了一些问题,我希望其他人可以对出现问题的方法有所了解。
I have a barchart rendered with jqPlot, which attach a click event handler to (on jqPlot chart) using the following code:
我有一个用jqPlot渲染的条形图,它使用以下代码将点击事件处理程序附加到(在jqPlot图表上):
$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);
myClickHandler looks like this:
myClickHandler看起来像这样:
function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
alert('you have triggered click action');
}
My intention is that by using this simple jqPlot implementation, the alert action will be triggered when a click is delivered on the area inside the chart, including the bar chart item. This works perfectly in any desktop browsers (IE6/7/8/9, Chrome, Safari).
我的意图是通过使用这个简单的jqPlot实现,当在图表内的区域(包括条形图项目)上传递点击时,将触发警报操作。这适用于任何桌面浏览器(IE6 / 7/8/9,Chrome,Safari)。
The issue I am having, however, is that when I access the site using iPhone/iPad, everything is rendered perfectly except that the click action specified above behaves strangely.
然而,我遇到的问题是,当我使用iPhone / iPad访问网站时,除了上面指定的点击操作表现异常外,所有内容都完美呈现。
If I try touching on any bar chart item, it does not alert 'you have triggered click action' - as if nothing is happening.
如果我尝试触摸任何条形图项目,它不会提示“您已触发点击操作” - 就像没有发生任何事情一样。
However, when I tried to click (touch) the empty space of the chart, the alert message fires normally.
但是,当我尝试单击(触摸)图表的空白区域时,警报消息会正常触发。
Any ideas?
3 个解决方案
#1
1
$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);
This call will attach onClick handler to the whole event canvas. (This event canvas is with the size of the plot and should be ABOVE all other canvases to work - meaning that you might need to manually modify it's z-index to make things work). What I think is happening in your case is this:
此调用将onClick处理程序附加到整个事件画布。 (此事件画布具有绘图的大小,并且应该在所有其他画布上方工作 - 这意味着您可能需要手动修改它的z-index以使其工作)。我认为你的情况是这样的:
-
You are attaching "myClickHandler" method to the event canvas. It will be fired every time event canvas is clicked, no matter where - over the series or over the background of the plot.
您正在将“myClickHandler”方法附加到事件画布。每次点击事件画布时都会触发它,无论在哪里 - 在系列上或在剧情的背景上。
-
In the case with barchart renderer this event canvas is below the series canvas (either it is created before series canvas, or it has lower z-index). Solution would be to manually increase the z-index of the event canvas AFTER chart was created. After this it will be on top and click events will be handled correctly.
在使用条形图渲染器的情况下,此事件画布位于系列画布下方(或者在系列画布之前创建,或者它具有较低的z-index)。解决方案是手动增加事件画布的创建后的z-index。在此之后它将位于顶部,并且将正确处理单击事件。
-
Remember, this click event will fired on every click over the plot, no matter where. Solution would be to filter the execution of the "myClickHandler" method like this:
请记住,无论在何处,此点击事件都将在图表上的每次点击时触发。解决方案是过滤“myClickHandler”方法的执行,如下所示:
Code:
function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
if (isClickEventOverTheSeries(gridpos)) {
alert('you have triggered click action');
}
}
In this example gridpos is array which contains 2 points - x and y coordinates of the click event. "isClickEventOverTheSeries" method is function which checks if under this coordinates there is series drawn. I'm not sure how to achieve this with BarChart renderer - I never used it, but with the line render there is a method which checks it...
在此示例中,gridpos是包含2个点的数组 - click事件的x和y坐标。 “isClickEventOverTheSeries”方法是检查在此坐标下是否有系列绘制的函数。我不知道如何使用BarChart渲染器实现这一点 - 我从未使用它,但是使用线渲染有一种方法可以检查它...
Hope this helps
希望这可以帮助
#2
0
I don't know about jqplot, but generally, there's much more going on in-between mousedown and click events on touch devices. There's a greater chance of "loosing" the click before the click event itself eventually fires. mousedown, or in your case 'jqplotMouseDown`, might be a better bet for you.
我不知道jqplot,但一般来说,触摸设备上的mousedown和click事件之间会有更多的事情发生。在点击事件本身最终触发之前,更有可能“松开”点击。 mousedown,或者在你的情况下'jqplotMouseDown`,对你来说可能是更好的选择。
#3
0
You should be able to sort out this problem by doing exactly as @PriorityMark suggests i.e. by setting, explicitly, the value of z-index on the jqplot-event-canvas.
您应该能够完全按照@PriorityMark的建议来解决这个问题,即通过在jqplot-event-canvas上明确设置z-index的值。
The way it might be done is shown, for example, in this answer where the problem was of a similar nature. There after my initial changes, i.e. sending of the jqplot-overlayCanvas-canvas behind the jqplot-series-canvas I forgot to put the jqplot-event-canvas in front.
例如,在这个问题具有相似性质的答案中,可以看到它的完成方式。在我最初的更改之后,即在jqplot-series-canvas后面发送jqplot-overlayCanvas-canvas我忘记将jqplot-event-canvas放在前面。
#1
1
$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);
This call will attach onClick handler to the whole event canvas. (This event canvas is with the size of the plot and should be ABOVE all other canvases to work - meaning that you might need to manually modify it's z-index to make things work). What I think is happening in your case is this:
此调用将onClick处理程序附加到整个事件画布。 (此事件画布具有绘图的大小,并且应该在所有其他画布上方工作 - 这意味着您可能需要手动修改它的z-index以使其工作)。我认为你的情况是这样的:
-
You are attaching "myClickHandler" method to the event canvas. It will be fired every time event canvas is clicked, no matter where - over the series or over the background of the plot.
您正在将“myClickHandler”方法附加到事件画布。每次点击事件画布时都会触发它,无论在哪里 - 在系列上或在剧情的背景上。
-
In the case with barchart renderer this event canvas is below the series canvas (either it is created before series canvas, or it has lower z-index). Solution would be to manually increase the z-index of the event canvas AFTER chart was created. After this it will be on top and click events will be handled correctly.
在使用条形图渲染器的情况下,此事件画布位于系列画布下方(或者在系列画布之前创建,或者它具有较低的z-index)。解决方案是手动增加事件画布的创建后的z-index。在此之后它将位于顶部,并且将正确处理单击事件。
-
Remember, this click event will fired on every click over the plot, no matter where. Solution would be to filter the execution of the "myClickHandler" method like this:
请记住,无论在何处,此点击事件都将在图表上的每次点击时触发。解决方案是过滤“myClickHandler”方法的执行,如下所示:
Code:
function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
if (isClickEventOverTheSeries(gridpos)) {
alert('you have triggered click action');
}
}
In this example gridpos is array which contains 2 points - x and y coordinates of the click event. "isClickEventOverTheSeries" method is function which checks if under this coordinates there is series drawn. I'm not sure how to achieve this with BarChart renderer - I never used it, but with the line render there is a method which checks it...
在此示例中,gridpos是包含2个点的数组 - click事件的x和y坐标。 “isClickEventOverTheSeries”方法是检查在此坐标下是否有系列绘制的函数。我不知道如何使用BarChart渲染器实现这一点 - 我从未使用它,但是使用线渲染有一种方法可以检查它...
Hope this helps
希望这可以帮助
#2
0
I don't know about jqplot, but generally, there's much more going on in-between mousedown and click events on touch devices. There's a greater chance of "loosing" the click before the click event itself eventually fires. mousedown, or in your case 'jqplotMouseDown`, might be a better bet for you.
我不知道jqplot,但一般来说,触摸设备上的mousedown和click事件之间会有更多的事情发生。在点击事件本身最终触发之前,更有可能“松开”点击。 mousedown,或者在你的情况下'jqplotMouseDown`,对你来说可能是更好的选择。
#3
0
You should be able to sort out this problem by doing exactly as @PriorityMark suggests i.e. by setting, explicitly, the value of z-index on the jqplot-event-canvas.
您应该能够完全按照@PriorityMark的建议来解决这个问题,即通过在jqplot-event-canvas上明确设置z-index的值。
The way it might be done is shown, for example, in this answer where the problem was of a similar nature. There after my initial changes, i.e. sending of the jqplot-overlayCanvas-canvas behind the jqplot-series-canvas I forgot to put the jqplot-event-canvas in front.
例如,在这个问题具有相似性质的答案中,可以看到它的完成方式。在我最初的更改之后,即在jqplot-series-canvas后面发送jqplot-overlayCanvas-canvas我忘记将jqplot-event-canvas放在前面。