526互联

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

发布时间 2023-12-08 10:26:38作者: 甲辰哥来帮你算命

翻译：没有添加被动事件监听器来阻止’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; }

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