javascript - 监听用户的touchmove操作，导致input等不能输入内容，点击事件不能执行

Question

移动端页面使用touchmove等手势滑动切换页面而导致input，botton表单提交，点击事件不能执行，使用http://www.cnblogs.com/duanhuajian/archive/2012/11/09/2763159.html该网站里面提供的方法也没有解决，不知道那位大神有方法

代码如下：
$(function(){

        var imgdefereds=[];  
    $('.app-content7').find('img').each(function(){  
        var dfd=$.Deferred();  
        $(this).bind('load',function(){  
            dfd.resolve();  
        }).bind('error',function(){  
        //图片加载错误，加入错误处理  
        //  dfd.resolve();
        setTimeout(function(){
            $('#loading').fadeOut();
            new slider_init();
        },5000); 
        })  
        if(this.complete) setTimeout(function(){  
            dfd.resolve();  
        },1000);  
        imgdefereds.push(dfd);  
    })  
    $.when.apply(null,imgdefereds).done(function(){  
        //callback(); // 全部图片加载完成触发的回调函数 
        setTimeout(function(){
            $('#loading').fadeOut();
            new slider_init();
        },2000);
    }); 

    })

    function slider_init(){//init

        this.page = $('.page');
        this.Content = $('.app-content');
        this.z = 10;
        this.DY,this.MY,this.UY;
        this.mark = true;
        this.h = this.Content.innerHeight();
        var _this = this;

        this.page.on('touchstart',function(e){
            if(!_this.mark)return;
            _this.mark = false;
            _this.start(e,$(this));
            return false;
        });
        this.page.on('mousedown',function(e){
            if(!_this.mark)return;
            _this.mark = false;
            _this.start(e,$(this));

            return false;
        });

    }

    slider_init.prototype.start = function(e,obj){//鼠标按下

        this.page.css({
            "-webkit-transition":"none",
            "-webkit-transform":"none"
        });
        var ev =event || e;

        if(ev.targetTouches){
            var touch = ev.targetTouches[0]; 
            this.DY = touch.pageY;
        }else{
            this.DY = ev.clientY;
        }

        this.next = 0;
        this.prev = 0;
        this.index = obj.index();
        this.z++;
        this.a = this.h / this.h;
        this.c = this.h / 10;
        var _this = this;

        this.page.on('touchmove',function(e){
            _this.move(e);
        });
        this.page.on('touchend',function(e){
            _this.end(e);
        });
        this.page.on('mousemove',function(e){
            _this.move(e);
        });
        this.page.on('mouseup',function(e){
            _this.end(e);
        });

    }

    slider_init.prototype.move = function(e){//鼠标移动
        var ev =event || e;
        if(ev.targetTouches){
            var touch = ev.targetTouches[0]; 
            if(touch.pageY - this.DY == 0)return;
            this.MY= touch.pageY;
            var Y = touch.pageY;
        }else{
            if(ev.clientY - this.DY == 0)return;
            this.MY= ev.clientY;
            var Y = ev.clientY;
        }

        this.MY= (this.MY-this.DY);
        if(Y < this.DY){
            this.prev = this.index;
            this.next = this.index + 1;

            if(this.next > this.page.length - 1){
                this.next = 0;
            }

            this.page.eq(this.prev).css('-webkit-transform-origin','50% 0')
            this.page.eq(this.next).removeClass('active2');
            if(!this.page.eq(this.next).hasClass('active')){
                this.page.eq(this.next).addClass('active');
            }
            this.MY = this.h + this.MY;
        }else{
            this.next = this.index - 1;
            this.prev = this.index;

            if(this.next == -1){
                this.next = this.page.length - 1;
            }
            this.page.eq(this.prev).css('-webkit-transform-origin','50% bottom');
            this.page.eq(this.next).removeClass('active');
            if(!this.page.eq(this.next).hasClass('active2')){
                this.page.eq(this.next).addClass('active2');
            }

            this.MY = -this.h + this.MY;
        }

        next_page = this.page.eq(this.next);
        prev_page = this.page.eq(this.prev);

        this.b = Math.abs(this.MY) / this.a;
        this.d = (this.b / this.h) > 1 ? 1 : (this.b / this.h) < 0 ? 0.1 : (this.b / this.h);

        prev_page.css({
            '-webkit-transform':'scale('+this.d+')',
            "opacity":this.d
        });

        next_page.css({
            'top':this.MY+"px",
            'zIndex':this.z

        });

        return false;
    }

    slider_init.prototype.end = function(e){//鼠标松开
            var ev =event || e;
            if(ev.changedTouches){
                var touch = ev.changedTouches[0];
                this.UY = touch.pageY;
            }else{
                this.UY = ev.clientY;
            }

            this.page.unbind('mousemove');
            this.page.unbind('mouseup');
            this.page.unbind('touchmove');
            this.page.unbind('touchend');
            var _this = this;

            if(this.UY - this.DY == 0){
                this.mark = true;
                return;
            }

            if(Math.abs(this.UY - this.DY) < 50){
                if(this.UY > this.DY){
                    var t = -100;
                }else{
                    var t = 100;
                }
                this.page.eq(this.next).removeClass('active').removeClass('active2').css({
                    'top':t+'%',
                    "-webkit-transition":"top cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s",
                    'display':'block'
                });
                this.page.eq(this.prev).css({"-webkit-transform":'scale(1)',"-webkit-transition":"-webkit-transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940)"});
                _this.mark = true;
                return;
            }

            var _this = this;

            this.page.eq(this.next).stop().animate({textIndex:0+'%'},{
                step:function(i){
                    var t = Math.abs(_this.page.eq(_this.next).position().top);
                    var kg = Math.abs(t) / _this.a;
                    var scal = (kg / _this.h) > 1 ? 1 : (kg / _this.h) < 0 ? 0.1 : (kg / _this.h);
                    _this.page.eq(_this.prev).css({"-webkit-transform":"scale("+scal+")","opacity":scal});
                }
            });

            this.page.eq(this.next).addClass('current').css({'top':"0",'zIndex':this.z,"-webkit-transition":"top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940)"});
            setTimeout(function(){
                _this.page.eq(_this.prev).removeClass('current').css({'top':"100%",'-webkit-transform':'none',"opacity":1});
                _this.page.eq(_this.next).removeClass('active').removeClass('active2');
                _this.mark = true;
            },600);
    }

Answer 1

试一试，事件代理。