web-dev-qa-db-fra.com

Toucher déplacer se coincer Tentative ignorée d'annuler un déplacement tactile

Je déconne avec les événements tactiles sur un curseur tactile et je reçois toujours l'erreur suivante: 

Tentative ignorée d’annuler un événement touchmove avec cancelable = false, par exemple parce que le défilement est en cours et ne peut pas être interrompu.

Je ne suis pas sûr de la cause de ce problème, je suis novice dans le traitement des événements tactiles et n'arrive pas à résoudre ce problème.

Voici le code qui gère l'événement tactile:

Slider.prototype.isSwipe = function(threshold) {
    return Math.abs(deltaX) > Math.max(threshold, Math.abs(deltaY));
}


Slider.prototype.touchStart = function(e) {

    if (this._isSliding) return false;

      touchMoving = true;
      deltaX = deltaY = 0;

    if (e.originalEvent.touches.length === 1) {

        startX = e.originalEvent.touches[0].pageX;
        startY = e.originalEvent.touches[0].pageY;

        this._$slider.on('touchmove touchcancel', this.touchMove.bind(this)).one('touchend', this.touchEnd.bind(this));

        isFlick = true;

        window.setTimeout(function() {
            isFlick = false;
        }, flickTimeout);
    }
}


Slider.prototype.touchMove = function(e) {

    deltaX = startX - e.originalEvent.touches[0].pageX;
    deltaY = startY - e.originalEvent.touches[0].pageY;

    if(this.isSwipe(swipeThreshold)) {
        e.preventDefault();
        e.stopPropagation();
        swiping = true;
    }
    if(swiping) {
        this.slide(deltaX / this._sliderWidth, true)
    }
}


Slider.prototype.touchEnd = function(e) {

    var threshold = isFlick ? swipeThreshold : this._sliderWidth / 2;

    if (this.isSwipe(threshold)) {
        deltaX < 0 ? this.prev() : this.next();
    }
    else {
        this.slide(0, !deltaX);
    }

    swiping = false;

    this._$slider.off('touchmove', this.touchMove).one(transitionend, $.proxy(function() {
        this.slide(0, true);
        touchMoving = false;
    }, this));
}

Vous pouvez trouver le curseur actuel ici sous cette plume.

Si vous faites glisser votre doigt assez rapidement, l'erreur sera renvoyée et restera parfois coincée au milieu d'un balayage. Je n'arrive toujours pas à comprendre pourquoi cela ne fonctionne pas. Toute aide/compréhension serait grandement appréciée. Pas sûr de ce que je fais mal.

javascriptjqueryevent-handlingslidertouch
28
souporserious

L'événement doit être cancelable. L'ajout d'une instruction if résout ce problème.

if (e.cancelable) {
   e.preventDefault();
}

Dans votre code, vous devriez le mettre ici:

if (this.isSwipe(swipeThreshold) && e.cancelable) {
   e.preventDefault();
   e.stopPropagation();
   swiping = true;
}
6
SrAxi

J'ai eu ce problème et tout ce que j'avais à faire, c'est return true de touchend et l'avertissement est parti.

10
Chet

Appeler preventDefault sur touchmove pendant que le défilement est actif ne fonctionne pas dans Chrome. Pour éviter les problèmes de performances, vous ne pouvez pas interrompre un défilement.

Essayez d'appeler preventDefault() à partir de touchstart et tout devrait bien se passer.

5
MartinMoizard

Veuillez supprimer e.preventDefault(), car event.cancelable de touchmove est false. Donc, vous ne pouvez pas appeler cette méthode.

1
mqliutie