dwweb-h5/2018专题/18073D模型展示专题-H5/js/lib/touch.js

// 移动端事件

var touch = {
    // 点击
    tap(classname, callback) {
       let classList = document.querySelectorAll(classname)
        for(let i = 0; i < classList.length; i++) {
            classList[i].addEventListener( 'touchstart' ,callback)
        }
     },

    // 滑动
    direction: function (target, upCallback) {

        target.addEventListener("touchstart", handleTouchEvent)
        target.addEventListener("touchend", handleTouchEvent)
        target.addEventListener("touchmove", handleTouchEvent)

        var startX;
        var startY;
        function handleTouchEvent(event) {
            switch (event.type){
                case "touchstart":
                    startX = event.touches[0].pageX;
                    startY = event.touches[0].pageY;
                    
                    break;
                case "touchend":
                    var spanX = event.changedTouches[0].pageX - startX;
                    var spanY = event.changedTouches[0].pageY - startY;
                    console.log(spanY)
                    if(Math.abs(spanX) > Math.abs(spanY)){      //认定为水平方向滑动
                        if(spanX > 30){         //向右
            
                        } else if(spanX < -30){ //向左
           
                        }
                    } else {                                    //认定为垂直方向滑动
                        if(spanY > 30){         //向下
                            upCallback()
                        } else if (spanY < -30) {//向上
                            
                        }
                    }

                    break;
                case "touchmove":
                    //阻止默认行为
                    event.preventDefault();
                    break;
            }
        }
    }
}

export default touch