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.

I have a barchart rendered with jqPlot, which attach a click event handler to (on jqPlot chart) using the following code:

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

myClickHandler looks like this:

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).

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.

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?

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.

I have a barchart rendered with jqPlot, which attach a click event handler to (on jqPlot chart) using the following code:

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

myClickHandler looks like this:

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).

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.

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?

• javascript
• jquery
• ios
• onclick
• jqplot

• 2 This is an old post, I realize that. However, it hasn't been fixed yet, have you checked to see if the z-index of the event canvas is higher then the other canvas items? Since the all of the canvas' are at the same hierarchy level in jqplot, it's possible that the bar canvas is just rendered in front of the other, and is causing you to not get your events. – PriorityMark Commented Dec 13, 2011 at 17:46
• can you try binding to touchstart or touchend and see if it works ? If that works then one of your element is eating away the touch and the it doesn't bubble up. – Gaurav Shah Commented Oct 9, 2012 at 6:48

3 Answers 3

$.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:

1. 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.

2. 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.

3. 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:

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...

Hope this helps

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.

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.

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.