Animation not working with touch events?

Question

So, I built this little interactive roulette:

http://techgoldmine.com/roulette/

I need it to work on mobile as well as desktop. Originally I handled interaction by having the user interact with an SVG circle overlapping the image, however for testing purposes I have removed that.

It still doesn't work on mobile and I can't work out why. The viewport meta tag seems to be set up correctly:

<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, user-scalable=no" />

Record mouse/finger position:

 $(document).bind('mousemove', function (e) {
        xpos = e.pageX;
        ypos = e.pageY;
    });

    $(document).bind('touchmove', function (e) {
        xpos = e.pageX;
        ypos = e.pageY;
    });

Mousedown/mouseup/touchstart/touchend:

    //mouse
    $('.roulette').bind('mousedown', function () {
        if (inMotion == true) {
            cleanUp();
        }
        intervalvar = setInterval(spinWheel, 24);
        // spinWheel();
        $(document).bind('mouseup', function () {
            count = Math.abs(force)
            mouseup = 1;
        });
    });

    //touch
    $('.roulette').bind('touchstart', function () {
        if (inMotion == true) {
            cleanUp();
        }
        intervalvar = setInterval(spinWheel, 24);
        // spinWheel();
        $(document).bind('touchend', function () {
            count = Math.abs(force)
            mouseup = 1;
        });
    });

I need it to work with touch as well. What's going wrong?

Answer 1

you wont get pageX from e.pageX To get pageX in touch devices, you get it from

//for javascript
e.touches[0].pageX
//for jquery
e.originalEvent.touches[0].pageX