admin管理员组文章数量:1530517
[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
版权声明：本文标题：[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1725346202a1019861.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论