单点手势库

33次阅读

共计 1055 个字符，预计需要花费 3 分钟才能阅读完成。

单点手势库
分析

手势是什么？
有哪些方法实现？

首先我这里指的手势是指我们在移动端进行触屏交互的时候，用户操作的一些手势。在我们在移动端需要一些交互的时候。难免有时候需要左滑右滑。
目前市面上常见的有两种实现，一种是基于 touch 事件做判断，一种是自定义事件。
我们接下来使用基于 touch 时间做判断实现。
首先分析下我们需要的。

长按事件
单击事件
双击事件
上下左右滑动
上下左右滑动中
移除事件，绑定事件

main
单击事件判断
单击事件是很简单的，只要 touchStart 开始了，我们就可以判断这个事件是单击事件触发了，主要是需要与别的事件互斥，因为只要你触碰到屏幕，在一定程度下都可以认为是一次单击事件
长按事件判断
单击事件与长按事件的区别是什么。是触碰屏幕进行交互的时间较单击事件事件长，长多少呢？具体的阈值应该可以自控
双击事件判断
我们知道移动端浏览器会有一个所谓的 300ms 问题。300ms 问题其实就是浏览器需要判断用户这次点击是单击还是双击，我们要做出快速响应~ 就是在一个时间内，用户是否再点击了屏幕。
上下左右滑判断
也就是离开屏幕的时候。位置与原坐标进行偏移了。从这个偏移量可以判断，是哪个位置的滑动。
上下左右滑动时判断
滑动时是什么意思。也就是当我们只是单纯的判断上下左右滑动的话，那么此时我们不能在滑动时候做交互。有一些效果，类似下拉刷新之类的就无法使用了。所以我们还需要添加滑动时。
一些注意的点
上下左右滑动事件判断。
当我们单击的时候，有一定程度上手机做了轻微的偏移量。此时应该有一个兼容范围，用来识别这种操作偏移，而不是用户真正的目的。
滑动中
既然上下左右滑动中事件都有了，那是不是可以有一个滑动中事件。
一些写法。
有绑定事件应该让用户有解绑事件。绑定是根据元素节点？类名？还是什么绑定。该事件是否要冒泡。回调函数操作对象包含什么？解绑事件是什么形式解绑
开始 coding
整体规划
首先是一个 touch 对象。它有 on remove 事件用于绑定删除元素观察者模型即可
然后根据传入绑定的 dom 节点，进行 touchStart touchmove touchend 做判断，只是一些逻辑的互斥还有 setTimeout 延迟用于判断一些复杂手势（长按之类）
是否冒泡的话~ 应该使用立即传入，因为我们的操作在一定程度上是一种代理。对内部有时候不是必可控，而且还牵扯着一些 setTimeout 的判断。
end
此次无具体代码。可以看 github 地址
总结