js识别触摸手势

概述

围绕三个事件展开工作，touchstart、touchmove、touchend。

• touchstart 用于判断触摸开始，注意，双指按到屏幕上，会触发2次touchstart，因为2个指头有先后，所以一次捕捉到先碰到屏幕的指头，第二次才捕捉到2个，更多指的手势以此类推。因此，需要防抖，延迟执行，以最后一次触发的结果为准。
• touchmove，实时更新几个手指头的位置。
• touchend，结束触摸，注意！这个不会带有结束时手指的位置，因此需要在触发touchmove时，同步更新手指位置信息。
• 触摸时浏览器有个默认的事件，这个事件会阻断你的所有操作。所以在操作之前要先把默认事件除掉evt.preventDefault();否则怪异现象层出不穷,因此如果要提供单指横向、纵向滚动，需要自己实现了。
• 有事件冒泡，因此在父节点上监听就能获得所有数据，比如在body上监听。这种东西的困难点不在于如何获取数据源，而在于如何计算并判断输入数据对应了什么手势，还是推荐用现成的库，比如hammer.js。

参考文档

https://juejin.cn/post/6844903696443129869

https://juejin.cn/post/6844903587970023431

https://github.com/webproblem/Blog/blob/master/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/AlloyFinger/alloy_finger.js

自定义事件CustomEvent https://developer.mozi