iPhone/iPad touch events Javascript LineChart

Question

I am trying to implement a linegraph with movable points in Javascript using Highcharts . Using latest Chrome everything just works as expected. However, when I look at it on my iPhone or iPad, the movable points wouldn't move at all.

This is due to the fact that mouse events are handled differently in mobile Safari.

mousedown becomes touchstart , mousemove becomes touchmove , etc.

I tried to map all the touchevents to their appropriate mobile equivalent but without much success. The points can be dragged, but the view is not updated...

Chrome working version: http://jsfiddle.net/MTyzv/3/

Mobile Safari version: http://jsfiddle.net/MTyzv/7/

UPDATE

Ok I narrowed the problem down a bit... It seems like all the touch events are handled correctly, but the points jump to 0.0 as soon as they are moved. In addition to that, the graph is not "redrawn" after the initial touch. See the updated version of this Fiddle http://jsfiddle.net/MTyzv/11/

Answer 1

It's a usual issue for everyone who starts working with touch events.

TouchEvent supports multitouch, so there's not such a thing like event.pageX . TouchEvent contains three "TouchLists", its:

• event.touches
• event.targetToches
• event.changedTouches

Finally on those lists you can get a Touch pageX, pageY, etc. If you don't care about multitouch there's a common simplification, you can call event.targetTouches[0].pageX

I updated your demo here: http://jsfiddle.net/7UsbM/7/ now it works in both, touch-enabled devices and desktop browsers.

Don't forget to take a look at MDN reference: https://developer.mozilla.org/en/DOM/Touch_events

Hope it helps.

Answer 2

There is no such thing like drag for mobile, but you need to use touch events to this working. Usually you need x,y co-ordinates to make logic, so make functions/classes that work on x,y position of mouse/ touch, than simply add events and get touch x,y or click x,y and call these functions.

$('div').bind('mousedown' , function(e)
{
   // get x,y code
   var y = e.pageY;
   var x = e.pageX;

   // pass to function down(x,y);
   down(x,y);
});


$('div').bind('touchstart' , function(e)
{
   // get x,y code
   var touch = e.touches[0];
   var y = touch.pageY;
   var x = touch.pageX;

   // pass to function down(x,y);
   down(x,y);
});

function down(x,y)
{
   // do something with x,y
}