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?
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
So to create an array of all the positions that occur during a touch event you do something like this
Code:
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);
}
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).
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
Code:
<!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>
Reply With Quote
Bookmarks