移动端手势处理

文章目录

1. 1. 前言
   1. 1.1. 解决问题
   2. 1.2. 解决原理
   3. 1.3. 针对以上解决原理，解决移动端的hack方案如下
      1. 1.3.1. 总结

前言

做过移动开的同学都知道，苹果手机在滚动的时候是具有弹性距离的。
最难处理的一点就是，你要在页面里面的某一块做垂直滚动的处理。
这个时候往往会触发整个屏幕的整体移动,这个是个非常头疼的问题

解决问题

笔者最近在封装一套移动端的手势库，对于这个问题做了一定的研究，下面给出解决方案。

解决原理

• document的touchmove事件在scroll之前触发
• 事件是可以冒泡的

针对以上解决原理，解决移动端的hack方案如下

在全局环境下，加上如下代码即可
document.addEventListener('touchmove',()=>{})

总结

是不是很神奇？笔者针对这个hack方案做了不少实验，包括事件冒泡顺序及scroll和touchmove处理。
最后的结论就是通过冒泡，让你针对的dom节点优先移动，然后document的事件才会执行。
由于你自己写了touchmove，因此劫持了原生的处理方案，使得scroll没被触发。