我有一个简单的例子,用户开始在触摸屏上滚动,然后一秒钟后,我想禁用滚动。我认为 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,控制台中有提示:
[Intervention] Ignored attempt to cancel a
touchmove
event withcancelable=false
, for example because scrolling is in progress and cannot be interrupted.
问题正是
Event.cancelable
.不幸的是,这个属性是只读的,调用 preventDefault
是不安全的。对于不可取消的事件。如果您打印 e.cancelable
在 TM
您可以在整个滚动过程中观察到 e.cancelable
是假的。
关于滚动已经开始后,Javascript在touchmove上停止滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67768117/