问题描述
我有一个简单的例子,用户开始在触摸屏上滚动,然后在一秒钟后,我想禁用滚动。我认为 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 不起作用。
解决方法
如果你用的是chrome,控制台有提示:
[干预] 忽略尝试取消 touchmove
的 cancelable=false
事件,例如因为滚动正在进行且无法中断。
问题正是Event.cancelable
。不幸的是,此属性是只读的,为不可取消的事件调用 preventDefault
是不安全的。如果您在 e.cancelable
函数中打印 TM
,您可以观察到在整个滚动过程中 e.cancelable
为假。