touch事件

移动开发过程之中，涉及到touch事件的情况特别多，比如按下，按起，滑动。这些事件在不同的设备之中存在差异。

组件

之前的滑动处理我都是自己去写的，没有使用第三方的组件。看了一篇文章介绍，提到了三个组件：

  • hammer.js
  • zepto
  • appframework
    这三个都对touch进行了处理，第一个是专门的触屏手势处理框架，功能很强大。其他两个，据说zepto的会好一点，虽然appframework自己说是对zepto的touch进行了修改和提升。

事件顺序

没有touch的时候: mousedown -> mouseup -> click。

有touch的时候：touchstart -> touchmove -> touchend。

都有的时候:

  • 点击操作: touchstart -> touchend -> mousedown -> mouseup -> click
  • 移动的时候: touchstart -> touchmove -> touchend

    坑

安卓设备下swipe很难触发

这是安卓的一个老问题了.谷歌一下 类似zepto android swipe的关键字,就能发现不少.很多项目中的issue都能找到这个问题,连安卓自身项目里都有相关issue(链接要翻墙)。

解决方法就是在touchstart或touchmove事件中,主动调用e.preventDefault()。

滑动方向的问题

以上下滑动为主的操作,有可能触发swipeLeft/Right事件,而不是swipeUp/Down事件.这个主要是因为native scroll的一些特性,导致算距离时竖向的距离可能会很小,而上下滑的最后,一般会有一个横向滑动的连带动作,导致deltaX>deltaY,从而判断出错.

最后说一下,还是慎用左右滑动的设计,一是兼容性问题.二是,微信等app是手机网页主要的入口,而从左向右的滑动,很容易关闭页面.

参考资料

原文: https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/event-touch.html