Touch identifier

by desandro

HTML

<pre>this page only listens to one touch at a time.</pre>

CSS

html, body {
    height: 100%;
}

body {
    font-size: 40px;
}

JavaScript

var pre = document.querySelector('pre');
function log( message ) {
  pre.innerText = message;
}

var identifier;
var isTouching = false;

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 ) {
  var touch = getTouch( event );
  if ( !touch ) {
    return;
  }
  log( 'touch move ' + touch.pageX + ' ' + touch.pageY );
}

function onTouchEnd( event ) {
  var touch = getTouch( event );
  if ( !touch ) {
    return;
  }
  log( 'touch _ENDED_ ' + touch.pageX + ' ' + touch.pageY );
  window.removeEventListener( 'touchmove', onTouchMove, false );
  window.removeEventListener( 'touchend', onTouchEnd, false );
  isTouching = false;
}