touch.identifier = 0

In the touch event API, each touch object has a unique identifier property. This allows you to keep track of which touch is which when listening to touch events. Try out jsfiddle.net/desandro/WnnG9/8/show/light on a touch device.

document.body.addEventListener( 'touchstart', function( event ) {
  // dismiss after-touches
  if ( isTouching ) {
    return;
  }
  event.preventDefault();
  // only care about the first touch
  var touch = event.changedTouches[0];
  identifier = touch.identifier;
  log('touch START; indentifer ' + touch.identifier );
  window.addEventListener( 'touchmove', onTouchMove, false );
  window.addEventListener( 'touchend', onTouchEnd, false );
  isTouching = true;
}, false );

function getTouch( event ) {
  // cycle through every change touch and get one that matches
  for ( var i=0, len = event.changedTouches.length; i < len; i++ ) {
    var touch = event.changedTouches[i];
    if ( touch.identifier === identifier ) {
      return touch;
    }
  }
}

function onTouchMove( event ) {
  // get matched touch
  var touch = getTouch( event );
  if ( !touch ) {
    return;
  }
  log( 'touch move ' + touch.pageX + ' ' + touch.pageY );
}

I ran into a bug because I was short-cutting checking touch.idenfitier. iOS uses a unique number for each every touch, like 166930777, 166930778, 166930779. It looks like Opera Mobile (and possibly Android) isn’t as granular with these identifiers, instead using 0, 1, 2 for each gesture event, then using 0, 1, 2 for the next one. I ran into a gotcha on that first touch, when it’s a falsy value touch.identifier = 0.