移动端点击延迟的解决方案

  • 前置知识:
    在移动端多了touch的三个touch事件。
    所有事件触发顺序为:(touchstart——touchmove——touchend)——mouseover——mousedown——mouseup——click。
    当有touchmove触发时,就不会再触发touchend之后的事件。

  • 有两个库,一个是zepto,另一个是fastclick,它们都可以解决点击延迟的问题。
    其中,zepto有一个自定义事件tap,它是一个没有延迟的click事件。
    而fastclick是在touchend之后生成一个click事件,并立即触发这个click,再取消原本的click事件。
    这两者的原理都是一样的,都是在touchend之后触发,一个是触发它自己定义的tap事件,一个是触发原生click。

  • 这里有一个关键的问题,就是touchend之后不能够每次都触发tap,因为有可能用户是在上下滑并不是在点击,不然的话直接监听touchstart就好了。所以怎么判定用户是点击还是在上下滑呢?Zepto是用的位移偏差,即记录下touchstart的时候的初始位移,然后用touchend的时候的位移减掉初始位移的偏差,如果这个差值在30以内,则认为用户是点击,大于30则认为是滑动。而fastclick是用的时间偏差,分别记录touchstart和touchend的时间戳,如果它们的时间差大于700毫秒,则认为是滑动操作,否则是点击操作。

posted on 2017-09-11 10:17  cag2050  阅读(422)  评论(0编辑  收藏  举报

导航