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

手机屏幕单点接触是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看成是两个手指的触摸