移动端 滑动（不让页面发生变化）

<nav>
        <div class="headNavWrapper">
            <input class="active_id" type="hidden" data-active="{$Page.active}">
            <div class="headNav" id="headNav">
                <a href="{:U('Mjf/Groups/groupGoodsList')}" <if condition="$Page.active eq 0">class="active"</if>>团购首页</a>
                <volist name="goodsCat" id="v" >
                    <volist name="v" id="vo" key="k">
                            <a href="{:U('Mjf/Groups/groupGoodsList',array('catId'=>$vo['catId'],'temp'=>$vo['catId'],'active'=>$vo['catId']))}"  <if condition="$Page.active eq $vo['catId']">class="active"</if>>{$vo['catName']}</a>
                    </volist>
                </volist>
            </div>
        </div>
    </nav>

 function SlideHorizontal(id){
                this.id = id;
                this.startX = 0;
                this.moveX = 0;
                this.endX = 0;
                this.startMarginLeft = 0;
                this.speed = 0;
                this.moveHappen = false;
                this.vertical = 0;
                this.mouseStart = false;
                this.moreLength = parseFloat($("#" + this.id).css("width")) - parseFloat($("#" + this.id).parent().css("width"));
                var scope = this;
                $("#" + this.id).on("touchstart",function(e){
                    scope.mouseStart = true;
                    touchStartFn(e);
                });
                $("#" + this.id).on("mousedown",function(e){
                    scope.mouseStart = true;
                    touchStartFn(e);
                });
                $("#" + this.id).on("touchmove",function(e){
                    touchMoveFn(e);
                });
                $("#" + this.id).on("mousemove",function(e){
                    touchMoveFn(e);
                });
                $("#" + this.id).on("touchend",function(e){
                    scope.mouseStart = false;
                    touchEndFn(e);
                });
                $("#" + this.id).on("mouseup",function(e){
                    scope.mouseStart = false;
                    touchEndFn(e);
                });
                $(window).on("resize",function(){
                    scope.moreLength = parseFloat($("#" + scope.id).css("width")) - parseFloat($("#" + scope.id).parent().css("width"));
                });
                function touchStartFn(e){
                    if (e.clientX) {
                        scope.moveX = scope.startX = e.clientX;
                        scope.startY = e.clientY;
                    }else{
                        var touch = e.originalEvent.changedTouches[0];
                        scope.moveX = scope.startX = touch.clientX;
                        scope.startY = touch.clientY;
                    }
                    scope.moveHappen = false;
                    scope.startMarginLeft = parseFloat($("#" + scope.id).css("marginLeft"));
                }
                function touchMoveFn(e){
                    if (scope.mouseStart) {
                        if (e.clientX) {
                            scope.speed = e.clientX - scope.moveX;
                            scope.moveX = e.clientX;
                            scope.speedY = e.clientY - scope.startY;
                        }else{
                            var touch = e.originalEvent.changedTouches[0];
                            scope.speed = touch.clientX - scope.moveX;
                            scope.moveX = touch.clientX;
                            scope.speedY = touch.clientY - scope.startY;
                        }
                        if (scope.vertical !== 2 && scope.vertical !== 1) {
                            if (Math.abs(scope.speedY) > Math.abs(scope.speed)) {
                                scope.vertical = 1;
                            }else{
                                scope.vertical = 2;
                                scope.moveHappen = true;
                            }
                        }
                        if (scope.vertical === 2) {
                            e.preventDefault();
                            var dx = scope.moveX - scope.startX;
                            var marginLeft = scope.startMarginLeft + dx;
                            if (marginLeft > 50) {
                                marginLeft = 50;
                            }
                            if (marginLeft < -scope.moreLength - 50) {
                                marginLeft = -scope.moreLength - 50;
                            }
                            $("#" + scope.id).css({
                                "margin-left" : marginLeft
                            });
                            scope.time1 = (new Date()).getTime();
                        }
                    }
                }
                function touchEndFn(e){
                    if (e.clientX) {
                        scope.endX = e.clientX;
                    }else{
                        var touch = e.originalEvent.changedTouches[0];
                        scope.endX = touch.clientX;
                    }
                    scope.time2 = (new Date()).getTime();
                    if (scope.time2 - scope.time1 > 20) {
                        scope.speed = 0;
                    }
                    var marginLeft = parseFloat($("#" + scope.id).css("margin-left")) + scope.speed*20;
                    if (scope.moveHappen && scope.vertical === 2) {
                        if (marginLeft > 0) {
                            $("#" + scope.id).animate({
                                "margin-left" : 0
                            },200,"linear");
                        }else if (marginLeft < -scope.moreLength) {
                            $("#" + scope.id).animate({
                                "margin-left" : -scope.moreLength
                            },200,"linear");
                        }else{
                            $("#" + scope.id).animate({
                                "margin-left" : marginLeft
                            },200,"linear");
                        }
                    }
                    scope.vertical = 0;
                }
            };
            new SlideHorizontal("headNav");