移动端手势

[renmm]

什么是手势

为什么要做手势

如何构建手势库

实现手势的底层原理

原生触摸事件

• touchstart
• touchmove
• touchcancel
• touchend

原生事件的缺陷

移动端click会有2个问题：

• 会有200~300ms的延迟
• 延迟响应，会出现穿透，即点击会触发非当前层的点击事件。

移动浏览器为什么会有300ms的延迟呢

是因为双击缩放的功能，这个功能最早是由iphone为解决访问网站所设计（当时主流网站都是为大屏设计）

300ms延迟目前最好的解决方案

• 使用fastclick库，大概10k左右，如果不介意引入库大小
• 封装一个tap事件，用例代替click事件。

常见的事件和手势

• tap
• longtap
• dbtap
• move/drag
• swipe(Right/Left/Up/Down)
• pinch/zoom
• rotate

应用场景

实现手势的开源类库

• zepto的Touch模块
• hammerjs

参考

• 一步步打造一个移动端手势库
• 移动端为何不使用click而模拟tap事件及解决方案
• 300 毫秒点击延迟的来龙去脉
• Gestures - Material Design