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

Posted 2023-02-18

【中文标题】触摸移动卡住 忽略取消触摸移动的尝试

【英文标题】：Touch move getting stuck Ignored attempt to cancel a touchmove

【发布时间】：2014-12-16 04:19:30

【问题描述】：

我在触摸滑块上弄乱了触摸事件，并且不断收到以下错误：

使用cancelable=false 忽略取消touchmove 事件的尝试， 例如，因为滚动正在进行中并且不能 被打断了。

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

这里是处理触摸事件的代码：

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

您可以找到实际的滑块here at this pen。

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

【参考方案1】：

我遇到了这个问题，我所要做的就是来自 touchend 的return true，警告就消失了。

【讨论】：

这里没有任何改变

我在 if 语句中添加了 e.cancelable，然后尝试在该语句中调用 e.preventDefault()。

【参考方案2】：

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

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

【讨论】：

然后我得到：忽略取消触摸启动事件的尝试

事件监听器按附件顺序调用。 @Curtis 也许您在调用 preventDefault() 的事件处理程序之前添加了 touchstart 事件处理程序，并且 Chrome 已经开始阻止取消 touchstart/touchmove 事件的逻辑（滚动、捏缩放）。跨度>

【参考方案3】：

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

【参考方案4】：

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

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

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

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

【参考方案5】：

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

我的问题是我在 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，所以我的解决方案涉及设置状态，但我已经简化了它以获得更通用的解决方案。希望这可以帮助某人！