Javascript 在不中断单击或垂直滑动事件的情况下向左/向右滑动

资料来源：

我正在使用jQuery Mobile/Javascript和HTML5开发一个web应用程序。我想在智能设备上实现触摸滚动事件。在注意到jQuery mobile的$document.onswipleft和swiperight之后。。。一直挂在移动设备上，我使用了一个使用vmousedown和vmouseup事件的javascript代码段，这可以正常工作，但问题是，当我使用event.preventDefault时，这会中断具有jQuery移动导航转换的

//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>

---

你最初对swipeleft/right有什么问题？@NicolasR只是反应迟钝。它可能在Android上运行10次，但即使在调整灵敏度flagsOk之后，也不如这段代码那么顺利。对于您的代码，也许您可以尝试执行event.preventDefault；仅当您在vmouseup中更改页面时event@NicolasR我试过了。它不起作用。这样做可以防止点击页面内的所有内容-content@NicolasR此外，如果我仅在vmouseup上添加preventDefault，则刷卡只能在我的iPad/iPhone上使用，而不能在任何Android设备上使用