js實現移動端手指左右上下滑動翻頁效果

var ele = document.getElementsByClassName("img-box")[0];
        var beginX, beginY, endX, endY, swipeLeft, swipeRight;
        ele.addEventListener('touchstart', function (event) {
            event.stopPropagation();
            event.preventDefault();
            beginX = event.targetTouches[0].screenX;
            beginY = event.targetTouches[0].screenY;
            swipeLeft = false, swipeRight = false;
        });

        ele.addEventListener('touchmove', function (event) {
            event.stopPropagation();
            event.preventDefault();
            endX = event.targetTouches[0].screenX;
            endY = event.targetTouches[0].screenY;
            // 左右滑動
            if (Math.abs(endX - beginX) - Math.abs(endY - beginY) > 0) {
                /*向右滑動*/
                if (endX - beginX > 0) {
                    swipeRight = true;
                    swipeLeft = false;
                }
                /*向左滑動*/
                else {
                    swipeLeft = true;
                    swipeRight = false;
                }
            }
            else if(Math.abs(endX - beginX) - Math.abs(endY - beginY) < 0)
            {
                // 上下滑動
            }
        });
        ele.addEventListener('touchend', function (event) {
            event.stopPropagation();
            event.preventDefault();

            if (Math.abs(endX - beginX) - Math.abs(endY - beginY) > 0) {
                event.stopPropagation();
                event.preventDefault();if (swipeRight) {
                    swipeRight = !swipeRight;
                    /*向右滑動*/
                }
                if(swipeLeft) {
                    swipeLeft = !swipeLeft;
                    /*向左滑動*/
                }
            }
        });

 

除了這種方法之外可以使用第三方插件來實現同樣的效果，如QuoJS包含了多種移動端手勢效果及ajax請求等操作，但是在使用過程中遇到了問題。使用了QuoJS后，會造成JQuery的一些單擊事件和一些a標簽href屬性失效。並且發現QuoJS的swipeLeft和swipeRight事件中，手指只能水平滑動，如果稍微傾斜一點滑動，則事件不生效，也不知道是不是本人的設備問題。