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>
    body{
      width: 480px;
      height: 500px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <script>
    var touchArr = [];
    var isMultiTouch = false;

    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();
      }
      console.log('event added to touches.', eventName, eventObj.touches.length);
    }

    function mutlitouchAction(argument) {
      console.log('Any action on mutli touch begin stage', isMultiTouch);
    }

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

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

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

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

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

    function startup() {
      var el = document.querySelector('body');
      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>
	body{
	width: 480px;
	height: 500px;
	border: 1px solid red;
	}
	</style>
	</head>
	<body>
	<script>
	var touchArr = [];
	var isMultiTouch = false;

	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();
	}
	console.log('event added to touches.', eventName, eventObj.touches.length);
	}

	function mutlitouchAction(argument) {
	console.log('Any action on mutli touch begin stage', isMultiTouch);
	}

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

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

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

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

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

	function startup() {
	var el = document.querySelector('body');
	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>