javascript - mobile - 如何用 JS 或纯 CSS 创建一个 "virtual number lock"

Question

我在网络开发方面很有经验，但我正在尝试学习一些移动方面的知识，但我不确定自己是否了解如何处理触摸事件。我查看了一些指南 ( for example )，但我不确定如何在我的案例中应用它。

考虑这个(忽略代码的质量，我只是快速涂鸦来解释我的问题):

var span = $("span"),
    btns = $("button");
    
btns.on("click", function() {
     var $this  = $(this), 
         action = $this.data("action"),
         curVal = parseInt( span.text() );
     
     btns.prop("disabled", false);
     
     if (action == "less") {
        span.text(curVal-1);
        if (curVal == 2)
          $("#less").prop("disabled", true); 
     } else {
        span.text(curVal+1);
        if (curVal == 8)
          $("#more").prop("disabled", true);
     }
});

* { font-family: sans-serif; }

button {
  background: #eee;
  padding: 10px;
  margin: 5px;
  font-weight: bold;
  border: 1px dashed black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="less" data-action="less" disabled="disabled">&lt;</button>
<span>1</span>
<button id="more" data-action="more">&gt;</button>

我想这样做，但我希望它响应触摸移动而不是按钮。即，当您向右滑动手指时，它会像单击右键一样使用react，反之亦然。理想情况下，您可以向后滑动，数字会弹到您的手指上(有点像虚拟数字锁，如下图所示，虽然是水平的)

我可以使用 touchmove 测量运动并尝试在视觉上同步它，但这似乎需要很长时间并且是一个 bugstrosity。有更好/更简单的方法吗？ (相关:有没有办法用纯 CSS 做到这一点？)

Answer 1

根据你想支持多少触摸事件，我会寻找一个开源的js库来处理这个

一个很好的例子是 HammerJS