JS multitouch for checking swipes

212 views Asked by At

I was looking for the solution to find out swipe left and right on mobile browsers and created the lib (below). My questions is: is there a simple way of checking for swipe on android and iOS? Also: can I use mouse events instead?

(function (lib, img, cjs) {
lib.touches = new Array();
(lib.setTouchListeners = function(gFilename) {
    document.addEventListener("touchstart", function(event) {
        // index to the last touch (always the last in the list)
        var index = event.touches.length - 1;
        // identifier - unique id of the touch (always the least free number on android but quite large number on iOS)
        var iden = event.touches[index].identifier;
        // save this touch for later comparison (checking if it moved etc.)
        var t = {pageX:event.touches[index].pageX, pageY:event.touches[index].pageY, identifier:event.touches[index].identifier};
        lib.touches.push(t);
    },false);
    document.addEventListener("touchmove", function(event) {
        // prevent browser from using touch (move page up and down, resize by pinch)
        event.preventDefault();
    },false);
    document.addEventListener("touchend", function(event) {
        var len = event.changedTouches.length;
        var iden = 0;
        // check all changes although it's always one (but just in case something changes in future)
        for(var i = 0; i < len; i++) {
            iden = event.changedTouches[i].identifier;
            // find that identifier in the saved list
            for(var j = 0; j < lib.touches.length; j++) {
                if (iden == lib.touches[j].identifier) {
                    var horizontalMove = event.changedTouches[i].pageX - lib.touches[j].pageX;
                    var verticalMove = event.changedTouches[i].pageY - lib.touches[j].pageY;
                    if (Math.abs(horizontalMove) > 50) {
                        if (horizontalMove > 0) {
                            console.log('right');
                        } else {
                            console.log('left');
                        }
                    }
                    if (Math.abs(verticalMove) > 50) {
                        if (verticalMove > 0) {
                            console.log('down');
                        } else {
                            console.log('up');
                        }
                    }
                    lib.touches.splice(j, 1);
                    break;
                }
            }
        }
//      event.preventDefault();
    },false);

});
})(lib = lib||{}, images = images||{}, createjs = createjs||{});
var lib, images, createjs;
1

There are 1 answers

1
Kevin van Mierlo On

You have something called a GestureOverlay or a GestureDetector which you can use to check swipes. Here are the sites for the GestureOverlay and GestureDetector:

http://developer.android.com/reference/android/gesture/GestureOverlayView.html http://developer.android.com/reference/android/view/GestureDetector.html

See my other answer:

https://stackoverflow.com/a/18737199/2767703