muhammedbasil/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Touch events</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <style>
    .touchContainer{
      width: 480px;
      height: 500px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="touchContainer">
    <div id="log"></div>
  </div>
  <script>
    var touchArr = [];
    var isMultiTouch = false;

    function log(message){
  //    console.log(message)
      document.getElementById('log').innerHTML =  message+'<br/>'+document.getElementById('log').innerHTML;
    }

    function resetAll() {
      touchArr.length = 0;
      isMultiTouch = false;
    }

    function addToTouches(eventName, eventObj) {
      touchArr.push({
        eventName: eventName,
        eventObj: eventObj
      });
      if (touchArr.length == 2 &&
        (touchArr[0].eventName == 'touchstart' && touchArr[1].eventName == 'touchstart')) {
        isMultiTouch = true;
        mutlitouchAction();
      }
      log('event: '+eventName+', - touches: '+eventObj.touches.length);
      if(eventObj.touches[0] != undefined){
        log('X: '+eventObj.touches[0].pageX+'<br/>'+'Y: '+eventObj.touches[0].pageY);
      }
    }

    function mutlitouchAction(argument) {
      log('Mutli touch: '+ isMultiTouch);
    }

    function handleStart(event) {
      event.preventDefault();
      addToTouches('touchstart', event);
    }

    function handleEnd(event) {
      event.preventDefault();
      addToTouches('touchEnd', event);
      resetAll();
    }

    function handleCancel(event) {
      event.preventDefault();
      addToTouches('touchCancel', event);
    }

    function handleLeave(event) {
      event.preventDefault();
      addToTouches('touchLeave', event);
    }

    function handleMove(event) {
      event.preventDefault();
      addToTouches('touchMove', event);
    }

    function startup() {
      var el = document.querySelector('.touchContainer');
      el.addEventListener("touchstart", handleStart, false);
      el.addEventListener("touchend", handleEnd, false);
      el.addEventListener("touchcancel", handleCancel, false);
      el.addEventListener("touchleave", handleLeave, false);
      el.addEventListener("touchmove", handleMove, false);
    }
    startup();
  </script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Touch events</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<style>
	.touchContainer{
	width: 480px;
	height: 500px;
	border: 1px solid red;
	}
	</style>
	</head>
	<body>
	<div class="touchContainer">
	<div id="log"></div>
	</div>
	<script>
	var touchArr = [];
	var isMultiTouch = false;

	function log(message){
	// console.log(message)
	document.getElementById('log').innerHTML = message+'<br/>'+document.getElementById('log').innerHTML;
	}

	function resetAll() {
	touchArr.length = 0;
	isMultiTouch = false;
	}

	function addToTouches(eventName, eventObj) {
	touchArr.push({
	eventName: eventName,
	eventObj: eventObj
	});
	if (touchArr.length == 2 &&
	(touchArr[0].eventName == 'touchstart' && touchArr[1].eventName == 'touchstart')) {
	isMultiTouch = true;
	mutlitouchAction();
	}
	log('event: '+eventName+', - touches: '+eventObj.touches.length);
	if(eventObj.touches[0] != undefined){
	log('X: '+eventObj.touches[0].pageX+'<br/>'+'Y: '+eventObj.touches[0].pageY);
	}
	}

	function mutlitouchAction(argument) {
	log('Mutli touch: '+ isMultiTouch);
	}

	function handleStart(event) {
	event.preventDefault();
	addToTouches('touchstart', event);
	}

	function handleEnd(event) {
	event.preventDefault();
	addToTouches('touchEnd', event);
	resetAll();
	}

	function handleCancel(event) {
	event.preventDefault();
	addToTouches('touchCancel', event);
	}

	function handleLeave(event) {
	event.preventDefault();
	addToTouches('touchLeave', event);
	}

	function handleMove(event) {
	event.preventDefault();
	addToTouches('touchMove', event);
	}

	function startup() {
	var el = document.querySelector('.touchContainer');
	el.addEventListener("touchstart", handleStart, false);
	el.addEventListener("touchend", handleEnd, false);
	el.addEventListener("touchcancel", handleCancel, false);
	el.addEventListener("touchleave", handleLeave, false);
	el.addEventListener("touchmove", handleMove, false);
	}
	startup();
	</script>


	</body>
	</html>