ipad/iphone傳送帶無法按預期方式與touchmove一起工作

Question

我有一個傳送帶對所有瀏覽器和除iPad/iPhone之外的所有設備都適用。當我滑動旋轉木馬時，它會在停止之前使用jqueries緩動和反彈幾次。使其行爲的唯一方法就像在所有其他瀏覽器中一樣，只需在滑動後彈出一條警報消息，然後就可以完美實現。

[代碼]

$("#CarouselWrap").bind("touchmove", function(event){ 

if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { 
    whichWayMovingX[1] = event.originalEvent.touches[0].pageX; 
    whichWayMovingY[1] = event.originalEvent.touches[0].pageY; 

}else{ 
    whichWayMovingX[1] = event.originalEvent.changedTouches[0].pageX; 
    whichWayMovingY[1] = event.originalEvent.changedTouches[0].pageY; 
} 

if(whichWayMovingX[0] > whichWayMovingX[1]){ 
    if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)){ 
     alert("left"); 
     moveLeft(); 
    }else{ 
     moveLeft(); 
    } 
}else{ 
    if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)){ 
     alert("right"); 
     moveRight(); 
    }else{ 
     moveRight(); 
    } 
} 

}）;

moveLeft和moveRight函數與旋轉木馬左右的箭頭一起使用，所以我知道這些工作，但僅限於onclick事件。

[代碼]

switch(amountToMove) { 
    case -1011: 
$("#CarouselFeed").animate({marginLeft: amountToMove},{duration: 'slow', easing: 'easeOutBack', wipe:'true'}); 

[/代碼]

爲什麼會此代碼的工作這麼好了的onclick，而不是touchmove？

我試圖touchstart，touchend和touchmove的結合結合 - 納達 我曾嘗試使用touchmove鼠標移動 - diddlesquat 我曾嘗試使用一個setTimeout的思維，我不得不等待最後一個事件 - 沒有什麼

請幫忙，這是讓我瘋狂。

Answer 1

通過一些代碼找到了解決滑動的默認行爲的解決方案。

一是成立了聽衆：

if(document.getElementById("CarouselFeed")){ 
    $("#CarouselFeed").bind("touchstart", function(event){ 
     touchStart(event,"CarouselFeed") 
    }); 

    $("#CarouselFeed").bind("touchend", function(event){ 
     touchEnd(event); 
    }); 

    $("#CarouselFeed").bind("touchmove", function(event){ 
     touchMove(event); 
    }); 
} 

我發現一個網站下面的代碼中，感謝他們的代碼其他兩個網站，只是因爲該網站改變了代碼以適應小他們的需求，我也做了相同的：

// TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT 
// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM 
// redefined a few things to make this applicable to our needs 

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

// 4個觸摸事件處理程序

//注：touchStart處理程序也應得到觸發元件012的ID//確保它的ID在事件調用置於元素聲明過，如： //

var touchStart = function(event,passedName){ 
// disable the standard ability to select the touched object 
// event.preventDefault(); 
// get the total number of fingers touching the screen 
fingerCount = event.originalEvent.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.originalEvent.touches[0].pageX; 
    startY = event.originalEvent.touches[0].pageY; 
    // store the triggering element ID 
    triggerElementID = passedName; 
}else{ 
    // more than one finger touched so cancel 
    touchCancel(event); 
} 
} 

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

var touchEnd = function(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); 
} 
} 

var touchCancel = function(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; 
} 

var caluculateAngle = function(){ 
var X = startX-curX; 
deltaX = X; 
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);} 
} 

var determineSwipeDirection = function(){ 
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'; 
} 
} 

var processingRoutine = function(){ 
var swipedElement = document.getElementById(triggerElementID); 
if(swipeDirection == 'left'){ 
    moveLeft(); 
}else if(swipeDirection == 'right'){ 
    moveRight(); 
}else if((swipeDirection == 'up') || (swipeDirection == 'left')){ 
    moveLeft(); 
}else if((swipeDirection == 'up') || (swipeDirection == 'right')){ 
    moveRight(); 
}else if((swipeDirection == 'down') || (swipeDirection == 'left')){ 
    moveLeft(); 
}else if((swipeDirection == 'down') || (swipeDirection == 'right')){ 
    moveRight(); 
} 
} 

一個說明，我有這樣的刷卡上有橫幅轉盤工作。爲了使橫幅的鏈接正常工作，您必須在touchStart和touchEnd函數中註釋掉event.preventDefault（）。

而這一切都需要