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

Touch move getting stuck Ignored attempt to cancel a touchmove

本文关键字：触摸 移动 取消      更新时间：2023-09-26

我在触摸滑块上处理触摸事件，一直收到以下错误：

忽略了取消触摸移动事件的尝试，cancellable=false，例如，因为滚动正在进行，不能被打断。

我不确定是什么导致了这个问题，我是接触事件的新手，似乎无法解决这个问题。

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

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

您可以在这里找到实际的滑块。

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

事件必须是cancelable。添加if语句可以解决此问题。

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

在你的代码中，你应该把它放在这里：

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

我知道这是一篇旧帖子，但我在试图解决这个问题时遇到了很多问题，我最终做到了，所以我想与大家分享。

我的问题是，我在ontouchstart中添加了一个事件侦听器，并在ontouchend函数中删除了它——类似于这个

function onTouchStart() {
  window.addEventListener("touchmove", handleTouchMove, {
    passive: false
  });
}
function onTouchEnd() {
  window.removeEventListener("touchmove", handleTouchMove, {
    passive: true
  });
}
function handleTouchMove(e) {
  e.preventDefault();
}

由于某种原因，像这样添加它或删除它会导致事件随机不可取消的问题。因此，为了解决这个问题，我保持侦听器处于活动状态，并切换一个布尔值来决定它是否应该阻止该事件——类似于以下内容：

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

我实际上是在使用React，所以我的解决方案涉及设置状态，但我已经将其简化为一个更通用的解决方案。希望这能帮助到别人！

我遇到了这个问题，我所要做的就是从触摸端return true，警告消失了。

在主动滚动时在touchmove上调用preventDefault在Chrome中不起作用。为了防止性能问题，您不能中断滚动。

尝试从touchstart调用preventDefault()，一切都应该正常。

请删除e.preventDefault()，因为touchmove的event.cancelable是false。所以你不能调用这个方法。

如果是图像，您可以在css中将"touch action"设置为none。

相关文章：