为什么给 touchmove 加 passive: false 会报控制台警告？

顺红酱~ 提问于 2026-03-31 07:39:12 阅读 3

移动

我在做一个移动端的拖拽组件，为了阻止默认滚动行为，给 touchmove 事件加了 { passive: false }，但 Chrome 控制台一直提示“Consider marking event handler as ‘passive’ to improve scroll performance”。可是我明明需要调用 preventDefault() 啊，这警告该怎么处理？

这是我的代码：

element.addEventListener('touchmove', (e) => {
  e.preventDefault();
  // 处理拖拽逻辑
}, { passive: false });

触摸事件

我来解答赞 8 收藏

反馈

1 条解答

逸轩 Lv1

这警告确实让人头疼，我之前也碰到过。Chrome 这么提示是因为它希望我们尽可能使用 passive: true 来提高滚动性能，但你这种情况确实需要阻止默认行为。

其实你可以忽略这个警告，因为你确实需要调用 preventDefault()。不过如果你想让代码更干净，可以在事件处理函数里加个条件判断。

像这样：

let isDragging = false;



element.addEventListener('touchstart', (e) => {

  isDragging = true;

});



element.addEventListener('touchmove', (e) => {

  if (isDragging) {

    e.preventDefault();

    // 处理拖拽逻辑

  }

}, { passive: false });



element.addEventListener('touchend', () => {

  isDragging = false;

});

这样写虽然还是会有警告，但能确保只有在真正拖动的时候才调用 preventDefault()。说实话这警告更多是 Chrome 的优化建议，而不是必须解决的错误。继续用你的方法也没问题，别太纠结啦。

2026-03-31 08:00