ipad/iphone carousel работает не так, как ожидалось, с 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(); 
    } 
} 

}); [/ code]

Функции moveLeft и moveRight используются со стрелками слева и справа от карусели, поэтому я знаю, что они работают, но только для событий onclick.

[код]

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

[/ код]

Почему бы этот код работать так хорошо для OnClick, но не для TouchMove?

Я попытался совместить оков touchstart, touchend и TouchMove - нада Я пытался использовать TouchMove MouseMove - 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 запускающего// убедитесь, что его идентификатор передается в вызове события, помещенного в объявлении элемента, например: //

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

Одно примечание, я это коромысло работает на карусели, которая имеет баннеры. Чтобы ссылки на баннеры работали, вы должны закомментировать событие event.preventDefault() в функциях touchStart и touchEnd.

И это все, что требуется