前言
2020新年的第一篇问题 其实也不是第一次遇到这个问题,
主要是在vue 项目里面应用 factclick ,
一个报错红色警告:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See…
做了移动端的优化。看完一脸懵逼。其实就是是否阻止默认事件200ms延迟然后再执行滚动行为
但是这个factclick 就是避免延迟的,
解决方案是什么?
全网能搜到的方案是两种,一种是通过css方式,一种是通过js的方式。 css方式:比较简单
touch-action:none
js方式:在touch的事件监听方法上绑定第三个参数{ passive: false }
elem.addEventListener( ‘touchstart‘, fn, { passive: false } );
使用touch-action之后,有新的问题啦, 刺激啊
第一种方案把这行css写到全局中,结果就带来了灾难。 什么问题呢?
就是ios基本都可以的,但是安卓中的页面滚动都没了。这是为什么呢?
这个就要看下touch-action的更官方的触摸说明了。
这个是官网 https://cloud.tencent.com/developer/section/1072256
解決方法
先临时把对应的touch:none,全局的写法去掉了,用了js的部分去完成或者只在控制需要的元素内进行指定这行代码。由此也总结了几个问题或者教训吧。
但是 有人說;
设置成touch-action: manipulation;
解决300ms延迟-只允许进行滚动和持续缩放操作,这样就不会滚动不了了。
我亲自体验试了,可以的 OK 能用css 解决的问题坚决不用 js
继续加油