触摸屏滑块答案

【问题标题】：Slider for touchscreens触摸屏滑块
【发布时间】：2017-08-18 07:28:37
【问题描述】：

我这里有这样的滑块：https://jsfiddle.net/args91L4/ 我如何让它在触摸屏上工作，更确切地说，在 vanilla js 或纯 jquery 上没有第三方插件的方法是什么？我想跟踪鼠标事件，例如：

.mousedown();
 //Start moving
.mousemove ();
 //Track coordinates
.mouseup();
 //end moving

如何实现呢？还是有更简单的方法？

【问题讨论】：

【解决方案1】：

您可能不是在寻找鼠标事件，而是触摸 events，例如触摸启动

但这并不容易，因为您需要在每次触摸后决定用户可能想要实现的目标。如果他向下滚动到左侧，他是想向左滑动还是只是想向下滚动并且不是那么精确？还是他想点击并错误地向右移动了一点？这需要大量的计算和假设，并且可能非常困难。

因此，我建议您为此使用像 hammerjs 这样的库，它可以简化此配置并提供一些非常可靠的默认值。在hammerjs 中，您可能会使用swipe 识别器来检测想要像这样向左或向右滑动的用户

var hammerInstance = new Hammer(element, options);
hammerInstance.on('swipeleft', function(ev) {
  ... // slide to the left
}

【讨论】：

谢谢，这真的很容易，但我必须加载一个额外的框架，虽然很小（1kb）。我的目标是学习如何使用 vanilla js 或 jquery（没有 jquerymobile 之类的框架）来做到这一点，但感谢您的回答！