Search code examples
jqueryhighchartsios6jquery-events

HighchartsJS Click Event on iOS 6


After the release of iOS6, the Highchart bar graphs we've been using in our site stopped responding to click events on iOS devices. Although the graphs render correctly, the click function simply does not fire when clicking data points within.

Oddly, I discovered that the function does fire on click in iOS if it's attached to the mouseOut event, instead. I.E. If I define events: { mouseOut: function(){ //dosomething } } and then click the datapoint in the graph, iOS device will perform the function. (It is possible this is always the case with iOS device mouseOut, as there is no analogous touch event; the point, however, is that some events are firing in this context.)

I have created a very basic set of graphs in a flat HTML page to test the basic functionality of Highcharts in iOS 6, and that seems to work as expected for click events attached to data points.

I am happy to post the code (or a Fiddle link) with the specifics of the graph data, but I am more interested in knowing whether anyone else has seen a problem like this in iOS 6 with Highcharts JS.

Thanks so much for any insight you can offer. (As I said, the basic charts I created using the objects and data our site generates seem to work fine from a flat HTML page, so I don't think code would be terribly helpful in answering questions. But, I'm willing to post that code if someone thinks that would help them come to a conclusion.)


Solution

  • In case anyone else encounters this problem, I found that it resulted from a conflict with JQuery plugin extension for touch events (jquery.ui.touch-punch), which is what we use to make the JQ UI slider work.

    I also explicitly enabled allow click events in the Highcharts series settings, which previously had not been specified (though the click events were working as expected without it in all other browsers).

    The combination of removing the touch event JQ and adding the explicit click setting has fixed the problem.

    I'm not quite certain why this particular instance causes a problem for click handlers (we use many click events on many elements elsewhere), though I do see some attempt to handle touch events in the Highcharts source code itself.

    Hope this helps someone else.