Javascriptでスワイプ検出

左右のスワイプ動作が必要でしたので方法を調べた。
参考にした記事のままだと動作しなかったので変更して自分の環境で動作するように修正。

        function getSwipeEvent(){
            const LEFT = 1;
            const RIGHT = -1;
             // タップ時の誤動作を防ぐためのスワイプ時の処理を実行しない最小距離
            const minimumDistance = 50
            // スワイプ開始時の座標
            let startX = 0
            let startY = 0
            // スワイプ終了時の座標
            let endX = 0
            let endY = 0
            // 移動を開始した座標を取得
            window.addEventListener('touchstart', (e) =>  {
            startX = e.touches[0].pageX
            startY = e.touches[0].pageY
            })
            // 移動した座標を取得
            window.addEventListener('touchmove', (e) =>  {
            endX = e.changedTouches[0].pageX
            endY = e.changedTouches[0].pageY
            })
            // 移動距離から左右or上下の処理を実行
            window.addEventListener('touchend', (e) =>  {
            // スワイプ終了時にx軸とy軸の移動量を取得
            // 左スワイプに対応するためMath.abs()で+に変換
            var distanceX = Math.abs(endX - startX)
            var distanceY = Math.abs(endY - startY)

                if(endX != 0){
                    // 左右のスワイプ距離の方が上下より長い && 小さなスワイプは検知しないようにする
                    if (distanceX > distanceY && distanceX > minimumDistance) {
                        // スワイプ後の動作
                        if(startX < endX){
                            // 右スワイプ
                            maintabMove(RIGHT);
                        }
                        else{
                            //左スワイプ
                            maintabMove(LEFT);
                        }
                    }
                }
                if(endY !=0){
                    // 上下のスワイプ距離の方が左右より長い && 小さなスワイプは検知しないようにする
                    if (distanceX < distanceY && distanceY > minimumDistance) {
                        // スワイプ後の動作
                        //上下の動作は何もしない

                    }
                }
                startX = startY = endX = endY = 0;
            })

        }

上下の動作は不要でしたので無視。 現時点では特に問題なく動作している。

この記事が気に入ったらサポートをしてみませんか?