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

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

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

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