移動端手勢操做--兩點同時點擊的實現方案

手機屏幕單點接觸是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看成是兩個手指的觸摸