移动端手势操作--两点同时点击的实现方案

手机屏幕单点接触是click事件，那两点接触呢？最近项目中的需求是监视手机屏幕的两个手指同时点击事件。类似的需求还是多个手指点击等。技术实现方案很简单，但是由于一个人思路有限，结果绕了一些弯路。记录下来，勤思考，多实践

在线demo：https://codepen.io/zhaobinglo...

监听gesturestart事件

gesturestart事件与常用的click，dbclick时间是同样的道理，只需要绑定到指定的对象上，那用户两个手指点击对象时就会响应

这种实现方案存在一定的缺陷，当两个手指点击的时候，手指必须一前一后点击才可以触发，如果两个手指绝对同时点击屏幕，会被视为是一个click事件，而不是gesturestart事件

gesturestart事件在安卓机型全军覆没，不建议使用

使用hammer.js库

hammer.js是一个移动端手势操作库，在github上有超高人气。使用hammer.js定义的pinch方法，该方法封装了两点收缩和分开的手势，给对象绑定pinchstart事件，就可以监听两个手指的点击事件

这种方案也存在一定的缺陷，当两个手指点击屏幕的时候，必须开始滑动或者有滑动的趋势，才可以正确的识别出来

项目地址 http://hammerjs.github.io/

使用touchstart监听

使用原生js的touchstart

上面的两种方案，针对两点点击的效果，都可以勉强实现想要的效果，但是都有缺陷。最佳实现方案，是监听touchstart，touch事件对象中的touches数组记录了当前接触的点击位置，如果是两个手指点击，这里的length将为2，同理，如果要监听三个手指的点击，length将为3。经过实践，该方案是实现效果最完美的方案

使用jquery绑定touchstart

如果项目中使用的是jquery，在jquery中判断触摸点的个数和原生js稍有不同，jquery中使用
event.originalEvent.targetTouches.length来获取当前触摸点的个数。通过判断触摸点个数是否为2，来响应业务逻辑

最后一步优化

做到上一步，其实已经相当完美了，但是真实的项目里面永远会有层出不穷的坑。假设当前的page内容很长，当用户touchmove的时候，event.originalEvent.targetTouches.length也会为2，这是为什么呢？因为touchmove会不断的把获取到的坐标添加到targetTouches数组里面。所以为了避免touchmove的时候触发业务逻辑，这里必须把touchmove的情况过滤掉。当touchmove的时候，targetTouches中保存有用户touch坐标，假设向下滑动，每个touch的纵坐标差值会非常小，这里我设置一个临界值20（20已经相当大了，实际测试的时候，差值在1左右），只有当touch的纵坐标差值在20以上，我们才把这次touch当作是两个手指的触摸