触屏的左右滑动事件

触屏的左右滑动事件

“`
/滑屏效果 start /
var slider = {
//判断设备是否支持touch事件
touch:(‘ontouchstart’ in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider1:document.getElementById(‘main’),

    //事件
    events:{
        handleEvent:function(event){
            if(event.type == 'touchstart'){
                this.start(event);
            }else if(event.type == 'touchmove'){
                this.move(event);
            }else if(event.type == 'touchend'){
                this.end(event);
            }
        },
        //滑动开始
        start:function(event){
            var touch = event.targetTouches[0];     //touches数组对象获得屏幕上所有的touch，取第一个touch
            startPos = {x:touch.pageX};    //取第一个touch的坐标值
            endPos = {x:0};
            slider.slider1.addEventListener('touchmove',this,false);
            slider.slider1.addEventListener('touchend',this,false);
        },
        //移动
        move:function(event){
            //当屏幕有多个touch或者页面被缩放过，就不执行move操作
            if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
            var touch = event.targetTouches[0];
            endPos = {x:touch.pageX - startPos.x};
            event.preventDefault();      //阻止触摸事件的默认行为，即阻止滚屏
        },
        //滑动释放
        end:function(event){
            var touch = event.targetTouches[0];
            //判断是左移还是右移，当偏移量大于10时执行
            if(endPos.x > 100){
                goButton();
            }else if(endPos.x < -100){
                backButton();
            }
            //解绑事件
            slider.slider1.removeEventListener('touchmove',this,false);
            slider.slider1.removeEventListener('touchend',this,false);
        }
    },

    //初始化
    init:function(){
        var self = this;     //this指slider对象
        if(!!self.touch){
            self.slider1.addEventListener('touchstart',self.events,false)
        };    //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性
    }
};
/*滑屏效果  end*/

“`s