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;">

此外，您不必在页面上加载触控式jquery-ui扩展程序，以便此方法正常工作。

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

Answer 2

尝试在鼠标按下时触发功能，甚至也做一个

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

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

拖放界面：如何使其在触摸屏上工作？

2 个答案: