wake-up-neo.com

Berührungsbewegung bleibt hängen Ignorierter Versuch, einen Berührungsschritt abzubrechen

Ich verwirre mit Touch-Events auf einem Touch-Schieberegler und erhalte folgende Fehlermeldung: 

Ignorierter Versuch, ein Touchmove-Ereignis mit cancelable = false, .__ abzubrechen. Zum Beispiel, weil der Bildlauf läuft und nicht .__ sein kann. unterbrochen.

Ich bin nicht sicher, was dieses Problem verursacht, ich bin neu im Umgang mit Touch-Events und kann dieses Problem scheinbar nicht beheben.

Hier ist der Code für das Touch-Ereignis:

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

Den aktuellen Schieberegler finden Sie hier an diesem Stift.

Wenn Sie schnell genug durchstreichen, wird der Fehler ausgegeben und manchmal mitten im Durchstechen stecken. Ich kann mich immer noch nicht darum kümmern, warum es nicht funktioniert. Jede Hilfe/Einsicht wäre sehr dankbar. Nicht sicher, was ich falsch mache.

28
souporserious

Das Ereignis muss cancelable sein. Durch das Hinzufügen einer if-Anweisung wird dieses Problem gelöst.

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

In Ihrem Code sollten Sie es hier einfügen:

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

Ich hatte dieses Problem und alles, was ich tun musste, war return true von touchend und die Warnung ging weg.

10
Chet

Das Aufrufen von preventDefault für touchmove während des aktiven Bildlaufs funktioniert in Chrome nicht. Sie können einen Bildlauf nicht unterbrechen, um Leistungsprobleme zu vermeiden.

Versuchen Sie, preventDefault() von touchstart aufzurufen, und alles sollte in Ordnung sein.

5
MartinMoizard

Ich weiß, dass dies ein alter Beitrag ist, aber ich hatte viele Probleme, die versucht haben, dies zu lösen, und ich tat es schließlich, um es zu teilen.

Mein Problem war, dass ich einen Ereignis-Listener innerhalb von "uponuchstart" hinzufügte und ihn in den Funktionen von "uponuchend" entfernte - so etwas in der Art

function onTouchStart() {
  window.addEventListener("touchmove", handleTouchMove, {
    passive: false
  });
}

function onTouchEnd() {
  window.removeEventListener("touchmove", handleTouchMove, {
    passive: true
  });
}

function handleTouchMove(e) {
  e.preventDefault();
}

Aus irgendeinem Grund führte das Hinzufügen und Entfernen des Ereignisses dazu, dass dieses Problem zufällig nicht abgebrochen werden konnte. Um dies zu lösen, ließ ich den Listener aktiv und schaltete einen Booleschen Wert ein, ob er das Ereignis verhindern sollte oder nicht.

let stopScrolling = false;

window.addEventListener("touchmove", handleTouchMove, {
  passive: false
});

function handleTouchMove(e) {
  if (!stopScrolling) {
    return;
  }
  e.preventDefault();
}

function onTouchStart() {
  stopScrolling = true;
}

function onTouchEnd() {
  stopScrolling = false;
}

Eigentlich habe ich React verwendet, sodass meine Lösung das Festlegen des Status beinhaltete, aber ich habe es für eine allgemeinere Lösung vereinfacht. Hoffentlich hilft dies jemandem!

3
Jeff Hernandez

Bitte entfernen Sie e.preventDefault(), da event.cancelable von touchmove false ist. Sie können diese Methode also nicht aufrufen.

1
mqliutie