tow8ie/iphone_events_test.html

## iphone_events_test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
  <title>Test for iPhone Events</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  <style type="text/css" media="screen">

    html * { font-size: 100.01%; }

    * {
      padding: 0;
      margin: 0;
    }

    body {
      font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
      font-size: 62.5%;
      height: 1000px;
    }

    #eventlogger1, #eventlogger2 {
      width: 160px;
      height: 100px;
      float: left;
      background: #bbb;
    }

  </style>
  <script type="text/javascript" charset="utf-8" src="jquery-1.2.6.min.js"></script>
  <script type="text/javascript" charset="utf-8">

    // You have to import the jQuery library to make this work: http://jquery.com

    $(function () {

      var logger1_init_val = $('#eventlogger1').html();
      var logger2_init_val = $('#eventlogger2').html();

      var touch_handler = function (event) {

        event.preventDefault();

        if (event.type == "touchstart") {
          if (event.touches.length == 1) {
            $('#eventlogger1 .start_x').html(event.touches[0].pageX);
            $('#eventlogger1 .start_y').html(event.touches[0].pageY);
            $('#eventlogger1 .id').html(event.touches[0].identifier);
          }
          if (event.touches.length == 2) {
            $('#eventlogger1 .start_x').html(event.touches[0].pageX);
            $('#eventlogger1 .start_y').html(event.touches[0].pageY);
            $('#eventlogger1 .id').html(event.touches[0].identifier);

            $('#eventlogger2 .start_x').html(event.touches[1].pageX);
            $('#eventlogger2 .start_y').html(event.touches[1].pageY);
            $('#eventlogger2 .id').html(event.touches[1].identifier);
          }
        }

        if (event.type == "touchmove") {
          if (event.touches.length == 1) {
            $('#eventlogger1 .move_x').html(event.touches[0].pageX);
            $('#eventlogger1 .move_y').html(event.touches[0].pageY);
          }
          if (event.touches.length == 2) {
            $('#eventlogger1 .move_x').html(event.touches[0].pageX);
            $('#eventlogger1 .move_y').html(event.touches[0].pageY);

            $('#eventlogger2 .move_x').html(event.touches[1].pageX);
            $('#eventlogger2 .move_y').html(event.touches[1].pageY);
          }
        }

        if (event.type == "touchend") {
          if (event.touches.length == 0) {
            $('#eventlogger1 .start_x').html('');
            $('#eventlogger1 .start_y').html('');
            $('#eventlogger1 .move_x').html('');
            $('#eventlogger1 .move_y').html('');
            $('#eventlogger1 .id').html('');
          }
          if (event.touches.length == 1) {
            $('#eventlogger1 .start_x').html(event.touches[0].pageX);
            $('#eventlogger1 .start_y').html(event.touches[0].pageY);
            $('#eventlogger1 .id').html(event.touches[0].identifier);

            $('#eventlogger2 .start_x').html('');
            $('#eventlogger2 .start_y').html('');
            $('#eventlogger2 .move_x').html('');
            $('#eventlogger2 .move_y').html('');
            $('#eventlogger2 .id').html('');
          }
        }

      };


      document.addEventListener('touchmove', touch_handler, true);
      document.addEventListener('touchend', touch_handler, true);

    });

  </script>
</head>

<body>
  <div id="eventlogger1">
    start x:<span class="start_x"></span> y:<span class="start_y"></span><br />
    move x:<span class="move_x"></span> y:<span class="move_y"></span><br />
    identifier: <span class="id"></span>
  </div>
  <div id="eventlogger2">
    start x:<span class="start_x"></span> y:<span class="start_y"></span><br />
    move x:<span class="move_x"></span> y:<span class="move_y"></span><br />
    identifier <span class="id"></span>
  </div>
</body>

</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html>

	<head>
	<title>Test for iPhone Events</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<style type="text/css" media="screen">

	html * { font-size: 100.01%; }

	* {
	padding: 0;
	margin: 0;
	}

	body {
	font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	height: 1000px;
	}

	#eventlogger1, #eventlogger2 {
	width: 160px;
	height: 100px;
	float: left;
	background: #bbb;
	}

	</style>
	<script type="text/javascript" charset="utf-8" src="jquery-1.2.6.min.js"></script>
	<script type="text/javascript" charset="utf-8">

	// You have to import the jQuery library to make this work: http://jquery.com

	$(function () {

	var logger1_init_val = $('#eventlogger1').html();
	var logger2_init_val = $('#eventlogger2').html();

	var touch_handler = function (event) {

	event.preventDefault();

	if (event.type == "touchstart") {
	if (event.touches.length == 1) {
	$('#eventlogger1 .start_x').html(event.touches[0].pageX);
	$('#eventlogger1 .start_y').html(event.touches[0].pageY);
	$('#eventlogger1 .id').html(event.touches[0].identifier);
	}
	if (event.touches.length == 2) {
	$('#eventlogger1 .start_x').html(event.touches[0].pageX);
	$('#eventlogger1 .start_y').html(event.touches[0].pageY);
	$('#eventlogger1 .id').html(event.touches[0].identifier);

	$('#eventlogger2 .start_x').html(event.touches[1].pageX);
	$('#eventlogger2 .start_y').html(event.touches[1].pageY);
	$('#eventlogger2 .id').html(event.touches[1].identifier);
	}
	}

	if (event.type == "touchmove") {
	if (event.touches.length == 1) {
	$('#eventlogger1 .move_x').html(event.touches[0].pageX);
	$('#eventlogger1 .move_y').html(event.touches[0].pageY);
	}
	if (event.touches.length == 2) {
	$('#eventlogger1 .move_x').html(event.touches[0].pageX);
	$('#eventlogger1 .move_y').html(event.touches[0].pageY);

	$('#eventlogger2 .move_x').html(event.touches[1].pageX);
	$('#eventlogger2 .move_y').html(event.touches[1].pageY);
	}
	}

	if (event.type == "touchend") {
	if (event.touches.length == 0) {
	$('#eventlogger1 .start_x').html('');
	$('#eventlogger1 .start_y').html('');
	$('#eventlogger1 .move_x').html('');
	$('#eventlogger1 .move_y').html('');
	$('#eventlogger1 .id').html('');
	}
	if (event.touches.length == 1) {
	$('#eventlogger1 .start_x').html(event.touches[0].pageX);
	$('#eventlogger1 .start_y').html(event.touches[0].pageY);
	$('#eventlogger1 .id').html(event.touches[0].identifier);

	$('#eventlogger2 .start_x').html('');
	$('#eventlogger2 .start_y').html('');
	$('#eventlogger2 .move_x').html('');
	$('#eventlogger2 .move_y').html('');
	$('#eventlogger2 .id').html('');
	}
	}

	};


	document.addEventListener('touchmove', touch_handler, true);
	document.addEventListener('touchend', touch_handler, true);

	});

	</script>
	</head>

	<body>
	<div id="eventlogger1">
	start x:<span class="start_x"></span> y:<span class="start_y"></span><br />
	move x:<span class="move_x"></span> y:<span class="move_y"></span><br />
	identifier: <span class="id"></span>
	</div>
	<div id="eventlogger2">
	start x:<span class="start_x"></span> y:<span class="start_y"></span><br />
	move x:<span class="move_x"></span> y:<span class="move_y"></span><br />
	identifier <span class="id"></span>
	</div>
	</body>

	</html>