iPad Touch Test

Here is the markup for the example here with the touch event listeners for touchStart and touchMove

The JavaScript handlers are as follows :

  var logDiv = document.getElementById("log");
  var logDetailsDiv = document.getElementById("logDetails");
  
  function log( text ) {
      logDiv.innerHTML = text;
  }

  function inspect( obj ) {
    if (typeof obj === "undefined") {
        return "undefined";
    }
    var _props = [];

      for ( var i in obj ) {
          _props.push( i + " : " + obj[i] ); 
      }
      return " {" + _props.join( ",
" ) + "} ";
  }

  function touchStart( e ) {
    var box = document.getElementById("box");
    box.style.background = "green";
    log( "Touch Start! " + e.type + " event=" + inspect( e ) );
    logDetails( inspect( e.touches.item(0) ) );
    e.preventDefault();
    return false;
  }
  
  function touchMove( e ) {
    var targetEvent =  e.touches.item(0);
    var box = document.getElementById("box");
    box.style.background = "yellow";
    box.style.left = targetEvent.clientX + "px";
    box.style.top= targetEvent.clientY + "px";
    log("[x,y]=" + targetEvent.clientX + "," + targetEvent.clientY );
    logDetails( inspect( e ) );
    e.preventDefault();
    return false;
  }

You will need the iPad simulator or an iPhone to test this code. You can drag the box and see the resulting events.

iPad Touch Event Test

Client Details

Touch Test