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

合集 - uniapp(6)

1.uniapp微信小程序转支付宝小程序踩坑（持续更新）2023-06-262.uniapp引入高德地图或腾讯地图以及map在真机中常见问题汇总2023-07-073.关于Vue3中调试APP触发异常：exception:white screen cause create instanceContext failed,check js stack -> at useStore (app-service.js:2309:15)解决方案2023-12-014.关于uniapp打包APP自定义基座调试，遇到首页同意网络权限后白屏问题2023-12-075.h5、app、小程序跳转外部链接的几种方式2023-12-06

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

收起

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

原因：

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

解决方法：

?

1 2 3

1、在touch的事件监听方法上绑定第三个参数{ passive: false }， 通过传递 passive 为 false 来明确告诉浏览器：事件处理程序调用 preventDefault 来阻止默认滑动行为。 element.addEventListener('touchstart',function () {},{ passive: false });2、// 使用全局样式样式去掉* { touch-action: pan-y; }

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