javascript - touchmoveでipad/iphoneカルーセルが期待どおりに機能しない

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のバインドを組み合わせようとしました-nadatouchmovemousemoveを使用しようとしました-diddlesquat最後のイベントを待たなければならないと思ってsetTimeoutを使用しようとしました-何もありません

助けてください、これは私を狂わせています。

score 0 · Accepted Answer

スワイプのデフォルトの動作に対処するためのコードを介して解決策を見つけました。

まず、リスナーを設定します。

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

他の 2 つの Web サイトのコードに感謝する Web サイトで次のコードを見つけました。その Web サイトがニーズに合わせてコードを少し変更したのと同じように、私も同じことを行いました。

// 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 ハンドラーは、トリガー要素の 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();
}
}

1 つの注意点として、このスワイプはバナーのあるカルーセルで動作しています。バナーのリンクを機能させるには、touchStart および touchEnd 関数内の event.preventDefault() をコメントアウトする必要があります。

そして、それだけです

javascript - touchmoveでipad/iphoneカルーセルが期待どおりに機能しない

1 に答える 1

Related

Reference