向左/向右滑動網頁，但使用默認向上/向下滑動

Question

我使用padilicious來檢測將在iOS和桌面上查看的網頁的滑動手勢。對於我網站上一頁和下一頁的左/右滑動效果很好。但是，在向上/向下滑動時，它似乎會覆蓋iPhone/iPad中的默認行爲。我想要一個向上/向下滑動來滾動頁面，當我沒有跑步時，它會這樣做。只是讓代碼忽略向上/向下滑動似乎不起作用。

的padilicious代碼的部分，我已經

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; 
    } 


} 

Answer 1

從所有功能中刪除event.preventDefault();。在功能processingRoutine() {}中添加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'; 
    } 
} 

Answer 2

我不熟悉padilicious，但檢查，看看是否ontouchmove="BlockMove(event);"設置任何地方，像你描述的是防止頁面滾動距離，我不知道如何讓它保持垂直滾動，但水平滑動。

編輯：我因爲找到了做「原生」的感覺的iOS網絡應用程序真正有用的概述，它可能不是正是你要找的，但可以爲您提供的方法另一種途徑來你問題。檢查出來：http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Answer 3

有一個jQuery庫，它做工作（通過不提供向上/向下方法）：http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

Answer 4

Padilicious似乎要防止默認在所有情況下。在所有情況下查看對event.preventDefault（）的調用。

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

您將不得不改變啓動，停止，...處理程序不要在up和down情況下調用preventDefault（）。

Answer 5

我改劇本，這部作品：

// 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'; 
    }*/ 
}