向左/向右滑动而不会破坏单击或垂直滑动事件

Question

Swiping http://maroonlemoon.com/mobile/bookintransit.png

我正在使用jQuery Mobile / Javascript和HTML 5来开发Web应用程序。我想在智能设备上实现触摸滚动事件。在注意到jQuery mobile的$（文档）.on（＆＃34; swipeleft和swiperight ...一直挂在移动设备上之后，我使用了一个使用vmousedown和vmouseup事件的javascript代码片段，这样做效果不错但是问题是，当我使用event.preventDefault时，这会破坏＆lt; a href =＆＃34;＃bar＆＃34;点击哪些有jQuery移动导航过渡。此外，正常的垂直滚动会被此代码破坏。任何想法如何我可以使用相同的JavaScript代码克服这个问题（不想使用jQuery mobile＆＃s;刷卡事件）

//Javascript
var Page = 1;
        var gnStartX = 0;
        var gnStartY = 0;
        var gnEndX = 0;
        var gnEndY = 0;

        $("#pages-content").on('vmousedown',function(event){
            gnStartX = event.pageX;
            gnStartY = event.pageY;
            event.preventDefault(); 
            BindAll(); // this function binds div clicks inside #pages-content 
            // I want to re-bind normal vertical scrolling and any clicks on <a> tags with jQuery mobile transitions
        });

        $("#pages-content").on('vmouseup', function(event){
            gnEndX = event.pageX;
            gnEndY = event.pageY;  
            var distance = Math.ceil(nthroot(Math.pow((gnEndX - gnStartX),2) + Math.pow((gnEndY - gnStartY),2), 2));


            if(Math.abs(gnEndX - gnStartX) > Math.abs(gnEndY - gnStartY)) {
                if(gnEndX > gnStartX) {
                    if(Page>1) {
                        $('#pages-content').animate({"left":"+=100%"},function(){});
                        Page--;
                    }

                } else {
                    if(Page<4){
                        $('#pages-content').animate({"left":"-=100%"},function(){});   
                        Page++;
                    }

                }

            }
            event.preventDefault();   
            UpdatePageTitle(Page);
            BindAll();

        });

            function nthroot(x, n) {
              try {
                var negate = n % 2 == 1 && x < 0;
                if(negate)
                  x = -x;
                var possible = Math.pow(x, 1 / n);
                n = Math.pow(possible, n);
                if(Math.abs(x - n) < 1 && (x > 0 == n > 0))
                  return negate ? -possible : possible;
              } catch(e){}
            }


<!-- HTML Code
<div id="container" role="main" class="ui-content" style="overflow-x:hidden; padding:0px;">
    <div id="pages-content" style="position:relative;left:0%; width:500%; padding:1%;">
        <div id="page1" style="float:left; width:19.5%; padding-right:0.5%">
         <!-- This div may contain <a tags with href="" and with html5 transition attr
         </div>
         <div id="page2".... to page5
    </div>
</div>