控制台刷出一行 Unable to preventDefault inside passive event listener,想拦的下拉刷新没拦住,整页跟着一起滚,改了半天事件函数也没用,这类问题查起来很绕。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,touchmove 默认被当成 passive 监听,浏览器不允许在回调里调 preventDefault,想拦滚动必须显式声明 passive: false。没写这个选项,拦了也是白拦,控制台还会一直报警告。
碰到「passive 事件报错」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
el.addEventListener('touchmove', fn, { passive: false });
.track { touch-action: pan-y; }
权限不要一口气开到最大,先加到够用再往上试,范围小才好收。
具体做法是,给 touchmove 的监听选项里补上 passive: false,才允许拦截,这一项漏了等于没绑;只在该拦的元素上绑,不要挂到 document 上,范围越小越好,否则整页都滚不动;能交给 touch-action 处理的场景就别用 preventDefault,更省事,浏览器自己会算方向。
最后用这个标准收尾,控制台不再刷那条警告,下拉手势被拦住,页面其他区域照常滚动。
