javascript - 动画不适用于触摸事件？

Question

所以，我建立了这个小的交互式轮盘赌：

http://techgoldmine.com/roulette/

我需要它在移动设备和桌面设备上工作。最初，我通过让用户与与图像重叠的 SVG 圆圈进行交互来处理交互，但出于测试目的，我已将其删除。

它仍然无法在移动设备上运行，我不知道为什么。视口元标记似乎设置正确：

<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