[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki

admin管理员组

文章数量:1434736

[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive.

problem

控制台报错:
[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
这个警告通常出现在浏览器的开发者工具控制台中，是由于添加了非被动（non-passive）的事件监听器导致的。

reason

问题出在eruda这个工具 在tuchstart事件中使用了非被动事件监听器

什么是非被动（non-passive）事件监听器和被动事件监听器？

非被动（non-passive）事件监听器

• 默认情况下，事件监听器是非被动的，这意味着它们可以调用 event.preventDefault() 方法来阻止默认的事件行为。
• 例如，在滚动事件中，非被动事件监听器可以阻止页面滚动。
• 缺点：因为浏览器不知道事件监听器是否会调用 preventDefault()，所以每次事件触发时，它都必须等待监听器完成。这种等待会影响性能，尤其是在高频事件（如滚动和触摸）上。

element.addEventListener('scroll', function(event) {
  event.preventDefault(); // 阻止默认的滚动行为
});

被动事件监听器

• 被动事件监听器明确告诉浏览器，它们不会调用 event.preventDefault()。
• 优点：这样，浏览器可以立即执行默认行为（如滚动），而不需要等待事件监听器完成处理。这提高了性能，特别是在高频事件上。

element.addEventListener('scroll', function(event) {
  // 监听器不会调用 event.preventDefault()
}, { passive: true });

<template>
  <div ref="scrollContainer">
    <!-- 内容 -->
  </div>
</template>
<script>
export default {
  mounted() {
    this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
  },
  methods: {
    handleScroll(event) {
      // 处理滚动事件
    }
  }
}
</script>

solution

解决办法:

• 忽略警告：如果 Eruda 仅用于开发和调试环境中，并且不影响生产环境，你可以选择忽略这个警告。
• 在生产环境中禁用 Eruda： 确保 Eruda 仅在开发环境中加载，而在生产环境中不加载，以避免性能问题。
• 修改 Eruda 代码：如果你能够修改 Eruda 的源码，可以尝试将 touchstart 事件监听器设置为被动。但这可能需要深入理解 Eruda 的代码。
• 提建议或提交 Issue：如果没有简单的解决办法，可以向 Eruda 项目的维护者提交 Issue，建议他们在未来的版本中添加对被动事件监听器的支持。

本文标签： passiveeventviolationAddedlistener