Populating an array with touchmove

This site is best viewed in a modern browser with JavaScript enabled.

MDobleZ

Is is possible to populate an array with touchmove x (and another one with y) coordinates? As far as I've seen, touchmove only fires "one" event when the movement starts (unlike mousemove). Is there any workaround for this?

Thanks.

iBeZi

The touchmove event should fire every time you move, you get back an array of touch objects for every "touch" on the page, so the array you get back looks a little like this

changedTouches = [
   {
      pageX: 10,
      pageY: 30
   },
   {
      pageX: 40,
      pageY:60
   }
]

So to create an array of all the positions that occur during a touch event you do something like this

var xTouches = [];
var yTouches = [];
function touchMoveHndl(e) {
   //get the object representing the first touch
   var touch = e.changedTouches[0];
   //add the x position to the array
   xTouches.push(touch.pageX);
   //add the y position to the array
   yTouches.push(touch.pageY);
}

function touchEndHndl(e) {
   console.log(xTouches);
   console.log(yTouches);
}

MDobleZ

Thanks for the reply and sorry if I didn't expalin myself well. The thing is I need the event to keep firing while I keep moving my finger. If I move it in a circle, I want all the coordinates that describe the whole circumference (as if I had to draw).

iBeZi

The event does keep firing while you move you're finger, every time the browser detects you moving your finger the "touchmove" event fires, for example this code will add every x and every y coordinate to an array then when you've finished moving it'll print them all out onto the page

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			#toucharea {
				width: 100%;
				background: #333;
			}
		</style>
	</head>
	<body>
		<div id="toucharea"></div>
		<script type="text/javascript">
			var toucharea = document.getElementById('toucharea');
			toucharea.style.height = document.documentElement.clientHeight+"px";
			toucharea.addEventListener('touchstart',touchStartHndl);
			toucharea.addEventListener('touchmove',touchMoveHndl);
			toucharea.addEventListener('touchend',touchEndHndl);
			var xTouches;
			var yTouches;
			function touchStartHndl(e) {
				xTouches = [];
				yTouches = [];
				e.preventDefault();
			}
			function touchMoveHndl(e) {
				e.preventDefault();
				var touch = e.changedTouches[0];
				xTouches.push(touch.pageX);
				yTouches.push(touch.pageY);
			}
			function touchEndHndl(e) {
				toucharea.innerHTML = "";
				for(var i = 0, l = xTouches.length; i < l; i++) {
					toucharea.innerHTML += xTouches[i]+" - "+yTouches[i]+"<br/>";
				}
			}
		</script>
	</body>
</html>

MDobleZ

Thank you very much. It had failed on my previous attempt because I'd made a silly mistake, but now it works great. Thank you.