拖放界面：如何让它在触摸屏上工作？答案

【问题标题】：Drag-and-rotate interface: how to make it work on a touchscreen?拖放界面：如何让它在触摸屏上工作？
【发布时间】：2016-12-07 08:09:26
【问题描述】：

这是我制作的记分牌/生命计数器（用于桌面游戏）：

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

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

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

【问题讨论】：

标签： javascript svg rotation drag touchscreen

【解决方案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'。并对这些事件的处理函数进行相应的更改。我希望这会有所帮助。

【讨论】：

【解决方案2】：

尝试在鼠标按下时触发功能，甚至还可以制作一个

 <div style="position:fixed">
         ...........Counters.........
  </div>

将固定的标记将您的计数器放在此下方，并在用户点击触摸具有计数器的面板时弹出它，由于标记将固定背景将滚动，但您的计数器将保持在原位并旋转

【讨论】：