Javascript 拖动和旋转界面：如何使其在触摸屏上工作？

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

有两个类似里程表的计数器，使用SVG图形显示，其思想是您可以简单地“拨入”希望显示的数字。它似乎在非触摸屏设备上运行得很好：它在运行Opera的Windows7笔记本电脑上运行得很好，我还听说它在Mac电脑上使用的是真正的鼠标。然而，在平板电脑或智能手机上，数字不会改变。当您尝试更改它们时，浏览器会尝试滚动页面，即使没有“页面”可滚动

---

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

试着在鼠标按下时启动功能，甚至还可以制作一个

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

柜台。。。。。。。。。

---

将固定的标签将您的计数器置于此下方，并在用户单击触摸时将其弹出。由于标签将固定，计数器所在的面板将滚动，但您的计数器将保持在原位并旋转

一个错误但快速的解决方法是将触摸事件映射到里程表上的鼠标。取自

函数touchHandler（事件）
{
var touchs=event.changedtouchs，
第一个=接触[0]，
类型=”；
开关（事件类型）
{
案例“touchstart”：type=“mousedown”；中断；
案例“touchmove”：type=“mousemove”；中断；
案例“touchend”：type=“mouseup”；中断；
默认：返回；
}
var simulatedEvent=document.createEvent（“MouseEvent”）；
simulatedEvent.InitMouseeEvent（类型、true、true、window、1、，
第一，屏幕X，第一，屏幕Y，
first.clientX，first.clientY，false，
假，假，假，0/*左*/，空）；
首先，target.dispatchEvent（simulatedEvent）；
event.preventDefault（）；
}
函数映射使用（elem）
{
元素addEventListener（“touchstart”，touchHandler，true）；
元素addEventListener（“touchmove”，touchHandler，true）；
元素addEventListener（“touchend”，touchHandler，true）；
元素addEventListener（“touchcancel”，touchHandler，true）；
}
MapTouchToUse（document.getElementById（“p1里程表”）；
MapTouchToUse（document.getElementById（“p2里程表”）；

另外，要使其在edge和IE上工作，请添加样式属性

touch action:none-ms触摸动作：无到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;">



此外，您不必将touchpunchjqueryui扩展加载到页面，就可以使用此方法

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