本文详细介绍了移动端的触摸事件和Safari的独有手势事件，包括tap、doubletap、press、pan、flick等基本手势的实现原理。通过监听touchstart、touchmove、touchend、touchcancel事件，结合状态管理，可以实现自定义手势。对于多指触控，文章解释了如何处理多个触摸点的信息，以及计算旋转、缩放和平移的方法。作者还提供了一个移动端手势封装库的实现链接，供读者参考和使用。
一丶概述
如今移动端设备大行其道，前端也走进了移动的领域。在写移动端页面的交互效果的时候，我么难免要接触一些复杂的手势，而不仅仅像pc端那样简单的鼠标事件。手势实际上是一种输入模式。我们现在在直观意义上理解的人机交互是指人与机器之间的互动方式，这种互动方式经历了鼠标、物理硬件、屏幕触控、远距离的体感操作的逐步发展的过程。
二丶移动端手势事件
在浏览器中，为我们提供的手势并不算多，主要有：
如今移动端设备大行其道，前端也走进了移动的领域。在写移动端页面的交互效果的时候，我么难免要接触一些复杂的手势，而不仅仅像pc端那样简单的鼠标事件。手势实际上是一种输入模式。我们现在在直观意义上理解的人机交互是指人与机器之间的互动方式，这种互动方式经历了鼠标、物理硬件、屏幕触控、远距离的体感操作的逐步发展的过程。
二丶移动端手势事件
在浏览器中，为我们提供的手势并不算多，主要有：
- touchstart 当手指触摸屏幕时触发
- touchmove 当手指在屏幕滑动时不断的触发
- touchend 当手指从屏幕上移开时触发
- touchcancel 当系统停止跟踪触摸时触发
是不是感觉很少，safari还为我们提供了三个独有的手势事件(用于复杂的手势)，然而也仅仅只能在safari中使用
- gesturestart 当一个手指已经按在屏幕上，另一个手指也按上时触发
- gesturechange 当触摸屏幕上任何一个手指发生变化时触发
- gestureend 当任何一个手指从屏幕上移开时触发
最后呢，让我们看看移动设备上究竟有哪儿手势需要我们使用 
三丶让JS支持这些手势&nbs
最低0.47元/天 解锁文章
扫一扫
1254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
