touchmove 事件在 React 中为什么不触发？

Good“统元提问于 2026-03-01 23:48:21 阅读 3

移动

我在写一个移动端的滑动组件，给 div 加了 onTouchMove 事件，但手指滑动时完全没反应，onTouchStart 和 onTouchEnd 都能正常触发，就 touchmove 不行，这是为啥？

我试过加 passive: false，也试过用原生 addEventListener，但问题依旧。是不是 React 的合成事件有什么坑？

function SwipeBox() {
  const handleTouchMove = (e) => {
    console.log('moving', e.touches[0].clientX);
  };

  return (
    <div
      onTouchStart={() => console.log('start')}
      onTouchMove={handleTouchMove}
      onTouchEnd={() => console.log('end')}
      style={{ width: '100%', height: '200px', background: '#eee' }}
    />
  );
}

我来解答赞 2 收藏

反馈

1 条解答

夏侯慧慧 Lv1

十有八九是 CSS 的 touch-action 没设置，浏览器把触摸事件"吞"掉了去做页面滚动了。给那个 div 加上 touch-action: none 就行，改成这样：

function SwipeBox() {

  const handleTouchMove = (e) => {

    console.log('moving', e.touches[0].clientX);

  };



  return (

    
      onTouchStart={() => console.log('start')}

      onTouchMove={handleTouchMove}

      onTouchEnd={() => console.log('end')}

      style={{ 

        width: '100%', 

        height: '200px', 

        background: '#eee',

        touchAction: 'none'

      }}

    />

  );

}

移动端浏览器默认会拦截 touchmove 用来处理页面滚动，你不告诉它"别动，让我自己处理"，它就直接给你滚走了，事件根本不会触发。这个坑踩过好几次了。

2026-03-02 00:12