动画不能处理触摸事件？

Question

所以，我做了一个互动的轮盘赌：

http://techgoldmine.com/roulette/

我需要它在移动和桌面上工作。最初，我通过让用户与与图像重叠的SVG圆进行交互来处理交互，但为了测试目的，我删除了该圆。

它仍然不能在移动设备上工作，我也不知道为什么。viewport meta标记似乎设置正确：

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

记录鼠标/手指位置：

 $(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;
        });
    });

我也需要它与触摸一起工作。出什么问题了？

Answer 1

你不会从e.pageX获得pageX来在触控设备上获得pageX，你可以从

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