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; } // only care about the first touch var touch = event.changedTouches[0]; identifier = touch.identifer; 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 moved ' + touch.pageX + ' ' + touch.pageY ); } function onTouchMove( 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; }
<pre></pre>
html, body { height: 100%; }