javascript - touchend - Tocar mover atascarse Ignorado intento de cancelar un touchmove

touchmove javascript

Question

Estoy jugando con eventos táctiles en un control deslizante táctil y sigo recibiendo el siguiente error:

El intento ignorado de cancelar un evento de movimiento táctil con cancelable = falso, por ejemplo, porque el desplazamiento está en curso y no puede ser interrumpido

No estoy seguro de qué está causando este problema, soy nuevo en el trabajo con eventos táctiles y parece que no puedo solucionar este problema.

Aquí está el código que maneja el evento táctil:

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

Puede encontrar el control deslizante real aquí en esta pluma .

Si se desliza lo suficientemente rápido, se lanzará el error y, a veces, se atascará en medio de un golpe. Todavía no puedo entender por qué no está funcionando. Cualquier ayuda / conocimiento sería muy apreciado. No estoy seguro de lo que estoy haciendo mal.

Answer 1

El evento debe ser cancelable . Agregar una sentencia if resuelve este problema.

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

En tu código deberías ponerlo aquí:

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

Answer 2

Las llamadas a preventDefault en touchmove mientras se está desplazando activamente no funcionan en Chrome. Para evitar problemas de rendimiento, no puede interrumpir un desplazamiento.

Intente llamar a preventDefault() desde touchstart y todo debería estar bien.

Answer 3

Tuve este problema y todo lo que tenía que hacer es return true desde el touchend y la advertencia desapareció.

Answer 4

e.preventDefault() , porque event.cancelable de touchmove es false . Así que no puedes llamar a este método.