Javascript 将向左/向右滑动添加到网页，但使用默认的向上/向下滑动

我正在使用padilicious检测将在iOS和台式机上查看的网页的滑动手势。左/右滑动我的站点的上一页和下一页效果很好。然而，它似乎覆盖了iPhone/iPad上下滑动时的默认行为。我想要一个上/下滑动滚动页面，当我没有Padicious运行时它会这样做。仅仅让代码忽略向上/向下滑动似乎不起作用

我读过的那段代码

function processingRoutine() {
    var swipedElement = document.getElementById(triggerElementID);
    if ( swipeDirection == 'left' ) {
        document.location = document.getElementById('nextPage').href;
    } else if ( swipeDirection == 'right' ) {
        document.location = document.getElementById('prevPage').href;
    } else if ( swipeDirection == 'up' ) {
        return;
    } else if ( swipeDirection == 'down' ) {
        return;
    }


}

---

我不熟悉padilicious，但请检查是否在任何位置设置了

ontouchmove=“BlockMove（event）；”

，以防止页面像您描述的那样滚动，我不确定如何使其保持垂直滚动，但水平滑动

---

编辑：我发现了一个非常有帮助的概述，可以帮助您使用“本机”感觉的iOS web应用程序，它可能不是您想要的，但可以为您提供解决问题的另一种方法。查看：

有一个jquery库，它可以完成这项工作（通过不提供up/down方法）：

Padicious似乎在所有情况下都可以防止默认设置。在所有情况下，请参见对event.preventDefault（）的调用

function touchStart(event,passedName) {
  // disable the standard ability to select the touched object
  event.preventDefault();

---

你必须改变开始，停止。。。处理程序在上下两种情况下不调用preventDefault（）。

删除

event.preventDefault（）来自所有函数。在函数
processingRoutine（）{}
add
event.preventDefault（）中你想要的

function processingRoutine() {
    var swipedElement = document.getElementById(triggerElementID);
    if ( swipeDirection == 'left' ) {
        // REPLACE WITH YOUR ROUTINES
        //swipedElement.style.backgroundColor = 'orange';
        event.preventDefault();
    } else if ( swipeDirection == 'right' ) {
        // REPLACE WITH YOUR ROUTINES
        //swipedElement.style.backgroundColor = 'green';
        event.preventDefault();
    } else if ( swipeDirection == 'up' ) {
        // REPLACE WITH YOUR ROUTINES
        //swipedElement.style.backgroundColor = 'maroon';
    } else if ( swipeDirection == 'down' ) {
        // REPLACE WITH YOUR ROUTINES
        //swipedElement.style.backgroundColor = 'purple';
    }
}

我更改了脚本，这项工作：

    // TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT
// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM

// this script can be used with one or more page elements to perform actions based on them being swiped with a single finger

var triggerElementID = null; // this variable is used to identity the triggering element
var fingerCount = 0;
var startX = 0;
var startY = 0;
var curX = 0;
var curY = 0;
var deltaX = 0;
var deltaY = 0;
var horzDiff = 0;
var vertDiff = 0;
var minLength = 72; // the shortest distance the user may swipe
var swipeLength = 0;
var swipeAngle = null;
var swipeDirection = null;

// The 4 Touch Event Handlers

// NOTE: the touchStart handler should also receive the ID of the triggering element
// make sure its ID is passed in the event call placed in the element declaration, like:
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');"  ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">

function touchStart(event,passedName) {
    // disable the standard ability to select the touched object
    //event.preventDefault();
    // get the total number of fingers touching the screen
    fingerCount = event.touches.length;
    // since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
    // check that only one finger was used
    if ( fingerCount == 1 ) {
        // get the coordinates of the touch
        startX = event.touches[0].pageX;
        startY = event.touches[0].pageY;
        // store the triggering element ID
        triggerElementID = passedName;
    } else {
        // more than one finger touched so cancel
        touchCancel(event);
    }
}

function touchMove(event) {
    //event.preventDefault();
    if ( event.touches.length == 1 ) {
        curX = event.touches[0].pageX;
        curY = event.touches[0].pageY;
    } else {
        touchCancel(event);
    }
}

function touchEnd(event) {
    //event.preventDefault();
    // check to see if more than one finger was used and that there is an ending coordinate
    if ( fingerCount == 1 && curX != 0 ) {
        // use the Distance Formula to determine the length of the swipe
        swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
        // if the user swiped more than the minimum length, perform the appropriate action
        if ( swipeLength >= minLength ) {
            caluculateAngle();
            determineSwipeDirection();
            processingRoutine();
            touchCancel(event); // reset the variables
        } else {
            touchCancel(event);
        }   
    } else {
        touchCancel(event);
    }
}

function touchCancel(event) {
    // reset the variables back to default values
    fingerCount = 0;
    startX = 0;
    startY = 0;
    curX = 0;
    curY = 0;
    deltaX = 0;
    deltaY = 0;
    horzDiff = 0;
    vertDiff = 0;
    swipeLength = 0;
    swipeAngle = null;
    swipeDirection = null;
    triggerElementID = null;
}

function caluculateAngle() {
    var X = startX-curX;
    var Y = curY-startY;
    var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
    var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
    swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
    if ( swipeAngle < 0 ) { swipeAngle =  360 - Math.abs(swipeAngle); }
}

function determineSwipeDirection() {
    if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
        swipeDirection = 'left';
    } else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
        swipeDirection = 'left';
    } else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
        swipeDirection = 'right';
    }

    /* else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
        swipeDirection = 'down';
    } else {
        swipeDirection = 'up';
    }*/
}

function processingRoutine() {
    var swipedElement = document.getElementById(triggerElementID);
    if ( swipeDirection == 'left' ) {
        // REPLACE WITH YOUR ROUTINES
        event.preventDefault();
        swipedElement.style.backgroundColor = 'orange';
    } else if ( swipeDirection == 'right' ) {
        // REPLACE WITH YOUR ROUTINES
        event.preventDefault();
        swipedElement.style.backgroundColor = 'green';
    } 

    /*else if ( swipeDirection == 'up' ) {
        // REPLACE WITH YOUR ROUTINES
        swipedElement.style.backgroundColor = 'maroon';
    } else if ( swipeDirection == 'down' ) {
        // REPLACE WITH YOUR ROUTINES
        swipedElement.style.backgroundColor = 'purple';
    }*/
}

//TOUCH-EVENTS单指滑动感应JAVASCRIPT
//由PADILICIOUS.COM和MACOSXAUTOMATION.COM提供
//此脚本可与一个或多个页面元素一起使用，以执行基于单指滑动的操作
var triggerElementID=null；//此变量用于标识触发元素
var-fingerCount=0；
var startX=0；
var-startY=0；
var-curX=0；
var-curY=0；
增值税=0；
var-deltaY=0；
var-horzDiff=0；
var-vertDiff=0；
var minLength=72；//用户可以滑动的最短距离
var swipeLength=0；
var swipeAngle=null；
var swipeDirection=null；
//4个触摸事件处理程序
//注意：touchStart处理程序还应接收触发元素的ID
//确保在元素声明中放置的事件调用中传递其ID，如：
// 
函数touchStart（事件，passedName）{
//禁用选择触摸对象的标准功能
//event.preventDefault（）；
//获取触摸屏幕的手指总数
fingerCount=event.touchs.length；
//因为我们寻找的是一个滑动（单指）而不是一个手势（多指），
//检查是否只使用了一根手指
如果（fingerCount==1）{
//获取触摸的坐标
startX=event.touchs[0].pageX；
startY=event.touchs[0].pageY；
//存储触发元素ID
triggerElementID=passedName；
}否则{
//多个手指被触碰，所以取消
触摸取消（事件）；
}
}
功能触摸移动（事件）{
//event.preventDefault（）；
if（event.touchs.length==1）{
curX=event.touchs[0].pageX；
curY=event.touchs[0].pageY；
}否则{
触摸取消（事件）；
}
}
函数touchEnd（事件）{
//event.preventDefault（）；
//检查是否使用了多个手指，以及是否有结束坐标
如果（fingerCount==1&&curX！=0）{
//使用距离公式确定滑动的长度
swipeLength=Math.round（Math.sqrt（Math.pow（curX-startX，2）+Math.pow（curY-startY，2））；
//如果用户刷卡超过最小长度，请执行相应的操作
如果（瑞士长度>=最小长度）{
caluculateAngle（）；
确定方向（）；
处理例程（）；
touchCancel（事件）；//重置变量
}否则{
触摸取消（事件）；
}   
}否则{
触摸取消（事件）；
}
}
功能触摸取消（事件）{
//将变量重置回默认值
指数=0；
startX=0；
startY=0；
curX=0；
curY=0；
deltaX=0；
deltaY=0；
horzDiff=0；
vertDiff=0；
swipeLength=0；
swipeAngle=null；
swipeDirection=null；
triggerElementID=null；
}
函数caluculateAngle（）{
var X=startX curX；
var Y=curY startY；
var Z=Math.round（Math.sqrt（Math.pow（X，2）+Math.pow（Y，2））；//距离-四舍五入-以像素为单位
var r=Math.atan2（Y，X）；//以弧度表示的角度（笛卡尔坐标系）
swipeAngle=Math.round（r*180/Math.PI）；//角度（度）
如果（swipeAngle<0）{swipeAngle=360-Math.abs（swipeAngle）；}
}
函数determineSwipeDirection（）{
如果（（旋转角度=0））{
swipeDirection='左'；
}否则如果（（旋转角度=315））{
swipeDirection='左'；
}如果（（旋转角度>=135）和&（旋转角度45）和&（旋转角度<135））出现其他情况{
swipeDirection=‘向下’；
}否则{
swipeDirection=‘向上’；
}*/
}
函数处理例程（）{
var swipedElement=document.getElementById（triggerElementID）；
如果（swipeDirection=='left'）{
//用你的常规来代替
event.preventDefault（）；
swipedElement.style.backgroundColor='橙色'；
}else if（swipeDirection=='right'）{
//用你的常规来代替
event.preventDefault（）；
swipedElement.style.backgroundColor='绿色'；
} 
/*else if（swipeDirection=='up'）{
//用你的常规来代替
swipedElement.style.backgroundColor='maroon'；
}else if（swipeDirection=='down'）{
//用你的常规来代替
swipedElement.style.backgroundColor='紫色'；
}*/
}
代码不包括
区块移动（事件）
但我很高兴