javascript - 拖拽旋转界面 : how to make it work on a touchscreen?

Question

这是我制作的计分板/生命计数器(用于桌面游戏):

http://robsmisc.com/dual-score-demo.html

有两个类似里程表的计数器，使用 SVG 图形显示，其想法是您可以简单地“拨入”您希望显示的数字。它似乎在非触摸屏设备上运行良好:它在我运行 Opera 的 Windows 7 笔记本电脑上运行良好，而且我还被告知它在带有实际鼠标的 Mac 上运行。然而，在平板电脑或智能手机上，数字不会改变。那，当您尝试更改它们时，浏览器会尝试滚动页面，即使没有可滚动的“页面”也是如此。

我知道，如果我愿意，我可以重新编程计数器以使用“点击”而不是“拖动”。在我的网站上还有一个算术测验:你通过点击输入你的答案，它似乎在触摸设备上运行良好。但是，对于生命计数器，我更愿意使用拖动。我能做到这一点吗？如果可以，怎么做？

Answer 1

一个糟糕但快速的解决方法是将触摸事件映射到里程表上的鼠标。取自https://stackoverflow.com/a/1781750/3946520

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type = "mousemove"; break;        
        case "touchend":   type = "mouseup";   break;
        default:           return;
    }

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                                  first.screenX, first.screenY, 
                                  first.clientX, first.clientY, false, 
                                  false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function mapTouchToMouse(elem) 
{
    elem.addEventListener("touchstart", touchHandler, true);
    elem.addEventListener("touchmove", touchHandler, true);
    elem.addEventListener("touchend", touchHandler, true);
    elem.addEventListener("touchcancel", touchHandler, true);    
}

mapTouchToMouse(document.getElementById("p1-odometer"));
mapTouchToMouse(document.getElementById("p2-odometer"));

同时为了让它在边缘和 IE 上工作，添加样式属性 touch-action: none; -ms-touch-action:none; 到您的 SVG 元素:

<svg id="p2-odometer" width="100%" viewBox="-26 -26 57 52" background="#eee" style="touch-action:none; -ms-touch-action:none;">
<svg id="p1-odometer" width="100%" viewBox="-26 -26 57 52" background="#eee" style="touch-action:none; -ms-touch-action:none;">

此外，您不必将 touch-punch jquery-ui 扩展加载到页面，此方法也能正常工作。

如果您不想使用此方法并希望通过自定义触摸处理，那么您需要使用这些事件:'touchstart'、'touchmove'、'touchend'、'touchcancel'代替 'mousedown'、'mousemove'、'mouseup'、'mouseleave'。并对这些事件的处理函数进行相应的修改。我希望这会有所帮助。