X/Y Touch coordinates for mobile devices

Question

I am creating a web app that I am wanting to be usable on mobile devices. The initial mechanic of said app requires the current X/Y coordinates of the mouse - which doesn't require clicking and dragging, just simply moving the mouse around a browser window.

Now I have been looking in to the various jQuery/Javascript libraries concerning Touch and Gestures, yet I am unable to find anything that suits what I am after.

So basically I am looking for a way to get the x/y pos of a single finger touch/drag.

Eg: Touch the screen at 0, 0 then hold and drag it to 480,320. The values would then interpolate between x1 , y1 to x2 , y2 .

Thanks.

Answer 1

$(function() {
    var $log = $("#log");

    function updateLog(x, y) {
        $log.html('X: '+x+'; Y: '+y);
    }

    document.addEventListener('touchstart', function(e) {
        updateLog(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
    }, false);

    document.addEventListener('touchmove', function(e) {
        e.preventDefault();
        updateLog(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
    }, false);
});

Answer 2

You shouldn't need a library for this, it's fairly easy to write your own code using the touchstart, touchmove and touchend events.

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

As a side note, if you're using the iOS simulator for testing, be aware that it can sometimes give incorrect coordinates in a way that an actual device wouldn't, so you'll always need to keep a physical iOS device handy to verify that your code works.