滚动开始后Javascript停止在touchmove上滚动

Question

我有一个简单的例子，用户开始在触摸屏上滚动，然后一秒钟后，我想禁用滚动。我认为 event.preventDefault() 会停止滚动，但在滚动开始后它似乎不起作用

这是一个例子：https : //jsfiddle.net/7s5m8c6L/30/

let allowScroll=true;

function TS(e){//touchstart handler
  setTimeout(function(){
    allowScroll=false;
  },1000)
}

function TM(e){//touchmove handler
  if(!allowScroll){
    e.preventDefault();
  }
}

在这个例子中，你可以开始滚动，一秒钟后，我希望滚动停止，但它没有。我知道有很多方法可以让它与 CSS 一起工作（添加溢出：隐藏），但我特别想知道为什么 preventDefault 不起作用。

Answer 1

如果你使用的是chrome，控制台会有提示：

[干预] 忽略使用 取消touchmove事件的尝试cancelable=false，例如因为滚动正在进行且无法中断。

问题正是如此Event.cancelable。不幸的是，这个属性是只读的，调用preventDefault不可取消的事件是不安全的。如果您e.cancelable在TM函数中打印，您可以观察到整个滚动e.cancelable都是错误的。