触摸移动卡住忽略尝试取消触摸移动

I'm messing around with touch events on a touch slider and I keep getting the following error:

我正在搞乱触摸滑块上的触摸事件，我不断收到以下错误：

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

忽略尝试取消具有cancelable = false的touchmove事件，例如因为滚动正在进行且无法中断。

I'm not sure what is causing this problem, I am new to working with touch events and can't seem to fix this problem.

我不确定是什么导致了这个问题，我不熟悉触摸事件，似乎无法解决这个问题。

Here is the code handling the touch event:

以下是处理触摸事件的代码：

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

You can find the actual slider here at this pen.

您可以在此笔中找到实际的滑块。

If you swipe through fast enough it will throw the error and sometimes get stuck in the middle of a swipe. Still can't wrap my head around why it is not working. Any help/insight would be greatly appreciated. Not sure what I am doing wrong.

如果你刷得足够快，它会抛出错误，有时会卡在滑动中间。仍然无法解决为什么它不起作用。任何帮助/见解将不胜感激。不确定我做错了什么。

3 个解决方案

#1

I had this problem and all I had to do is return true from touchend and the warning went away.

我遇到了这个问题而且我所要做的就是从touchend返回真实并且警告消失了。

#2

Calling preventDefault on touchmove while you're actively scrolling is not working in Chrome. To prevent performance issues, you cannot interrupt a scroll.

在您主动滚动时调用touchmove上的preventDefault在Chrome中无效。为防止出现性能问题，您无法中断滚动。

Try to call preventDefault() from touchstart and everything should be ok.

尝试从touchstart调用preventDefault（），一切都应该没问题。

#3

Please remove e.preventDefault(), because event.cancelable of touchmove is false. So you can't call this method.

请删除e.preventDefault（），因为touchmove的event.cancelable为false。所以你不能称这种方法。

#1