uniapp滑动页面时警告Unable to preventDefault inside passive event listener due to target being treated as passive.

翻译:没有添加被动事件监听器来阻止’touchstart‘事件,请考虑添加事件管理者’passive’,以使页面更加流畅。

原因:

  • 由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault(),这就导致了浏览器不能及时响应滚动,略有延迟。
  • 所以为了让页面滚动的效果如丝般顺滑,从 chrome56 开始,在 window、document 和 body 上注册的touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。

解决方法:

1、
在touch的事件监听方法上绑定第三个参数{ passive: false }, 通过传递 passive 为 false 来明确告诉浏览器:事件处理程序调用 preventDefault 来阻止默认滑动行为。 element.addEventListener('touchstart',function () {},{ passive: false });

2、// 使用全局样式样式去掉
* { touch-action: pan-y; }

个人认为第二种解决方案比较简单且实用 

 

posted @ 2023-12-08 10:21  甲辰哥来帮你算命  阅读(242)  评论(0编辑  收藏  举报