解決移動端頁面的touchstart和touchmove衝突

最近在寫一個小專案，移動端的投票工具，作為一個第一次寫移動端的菜鳥，問題出現了：

為什麼一滑螢幕就觸發了一堆touchstart事件呀（摔！！！）

基本概念

• touchstart事件：當手指觸控式螢幕幕時候觸發，即使已經有一個手指放在螢幕上也會觸發。
• touchmove事件：當手指在螢幕上滑動的時候連續地觸發。在這個事件發生期間，呼叫preventDefault()事件可以阻止滾動。
• touchend事件：當手指從螢幕上離開的時候觸發。

看這個架勢很眼熟啊，emmm，，，好像和滑鼠的事件很相似

• mousedown：滑鼠按下
• mousemove：滑鼠移動
• mouseup：滑鼠擡起

在移動之前觸發一次點選是難以避免的，在不使用其他類庫的前提下有一個很好的解決方法就是進行判斷，然後分類解決

解決方法

這個方法參考了這篇文章 來自segmentfahlt的解決方法

    let flag = true;
    $person.on('touchstart touchmove touchend', (event) => {
        switch (event.type) {
                case 'touchstart'
 
:
                    flag = true;
                    reak;
                case 'touchmove':
                    flag = false;
                    break;
                case 'touchend':
                    if(flag){
                        // 點選事件
                    }else{
                    // 滑動事件
                    }
                        default
 
:
                            break;
                    }     
                });