Dealing with touchMove events in iOS and Ember

I’m adding iOS support to an Ember application which uses Flame.js. Most Flame.js widgets don’t have built-in support for touch events at the moment, so I’m working on adding it to the ones I need. I’ve got touchStart and touchEnd working just fine for clicking and certain state transitions.

However, touchMove has been a mess so far. I need it for dragging, and to do that I need to track where the movement began and where it is. So far I haven’t been able to get all that information consistently from touchMove. Various resources suggest that I should be looking in the event.touches array for my data, but the jsFiddles I’ve built so far all throw TypeError when I try to get length on that array, which they claim is undefined. (The usual places to look, event.pageX, event.pageY, etc. are also undefined.)

I’m testing with an iPad and with Phantom Limb, and with the latter I was able to get at data by accessing originalEvent, but that doesn’t work on the actual iPad, I think because the originalEvent attribute is an artifact of how Phantom Limb works. (My theory is that accessing originalEvent is accessing the original mouseMove that Phantom Limb transformed into a touchMove.)

Why is the event.touches array undefined for me? More to the point, where can I get touch position data so I can drag?

Here’s my most representative jsFiddle. Click the button to get a Panel, which you whould be able reposition by dragging its title bar if this was working. The extensions of Flame.State in the titleView of App.TestPanel are overriding the original states from Flame itself.

Answer

I don’t think it is just an artifact of PhantomLimb. We have a similar challenge, and use the following:

normalizeTouchEvent = function(event) {
    if (!event.touches) {
        event.touches = event.originalEvent.touches;
    }
    if (!event.pageX) {
        event.pageX = event.originalEvent.pageX;
    }
    if (!event.pageY) {
        event.pageY = event.originalEvent.pageY;
    }
};