前端对div连线_指尖下的js —— 多触式web前端开发之三：处理复杂手势！-CSDN博客

本文链接：https://blog.csdn.net/weixin_30039755/article/details/112781502

本文探讨了在多触式设备上处理复杂手势的事件，特别是`gesture event`，包括`gesturestart`、`gesturechange`和`gestureend`。通过这些事件，可以获取手指的`scale`和`rotation`信息，实现元素的旋转和伸缩。文中还提到了当两根手指同时上下移动时，可能触发`mousewheel`或`onscroll`事件，并推荐了一个多触式滚动组件iscroll-4。

摘要由CSDN通过智能技术生成

这篇文章着重介绍多触式设备上特有的gesture event（android和iOS对这个事件的封装大同小异）。这个事件是对touch event的更高层的封装，和touch一样，它同样包括gesturestart，gesturechange， gestureend三个事件回调：

gesturestart    // 当有两根或多根手指放到屏幕上的时候触发 
gesturechange    // 当有两根或多根手指在屏幕上，并且有手指移动的时候触发 
gestureend    // 当倒数第二根手指提起的时候触发，结束gesture

在学习web前端的过程中，难免会遇到很多的问题，这些问题可能会困扰你许久，为此我有个web前端开发学习交流群（545667817），里面都是知乎的小伙伴，大家互相学习互相交流共同进步，每日分享不同的学习资料。

事件处理函数中会得到一个GestureEvent类型的参数，它包含了手指的scale（两根移动过程中分开的比例）信息和rotation（两根手指间连线转动的角度）信息。

当两根或以上的手指在屏幕上活动的时候，我们可以做出一些较为复杂的手势。这将涉及到普通的mouse事件，touch事件和gesture事件，情况比较复杂。touch已经在第一篇文章里详细介绍，这里就简单带过。

我们还是先看看当分别将两根手指放到屏幕上的时候，会触发哪些事件吧：

1、第一根手指放下，触发tou