Detecting touchstart while detecting touchmove

Question

I've been plugging away at a project recently and up until now I've been using chromes debugger mobile emulator. This means I've been able to simulate touches and dragging behaviors with my mouse. Unfortunately because of just having one mouse I could never do both at the same time.

The project I'm working on adds two half-page sized DOM elements to the page, the one on the left has a touchmove event listener tied to it, and the other on the right has a touchstart event listener tied to it. They both work swimmingly.

But tonight I uploaded my project online to test some stuff out and opened it with an iPad and found I could only perform one action at a time. The page could not detect touchstart events on the right while I touchmoved on the left, and likewise couldn't detect touchmove events on the left while I tapped on the right.

Anyone done anything like this before? Like detecting different sets of touches on separate DOM elements?

Code snippets are a bit large to include here but the link to the github repo is here: https://github.com/matthewolsson/JoyShtick

Answer 1

DOM elements share a single touches array. Prior to this phase of testing I was under the assumption that any individual DOM element that had a touch listener applied to it had its own array of relevant touches. Now I know that every element on the page, regardless of its listeners, contributes to one singular touches array that stores any and all current touches on the page.

Knowing this I've rectified the situation by using the targetTouches touchlist. The link gives a good summary but the basics are that this is a single array of touches that is populated by ONLY the touches that occur within the DOM element the first one began in.

You can find a fantastic explanation of this list here ~ (stackoverflow.com/questions/7056026/variation-of-e-touches-e-targettouches-and-e-changedtouches). Last but not least the W3C has a very detailed page on the touch event and all of its features.