移动端点击为什么有300ms延迟？怎么解决？

Top丶梓熙提问于 2026-03-26 12:22:19 阅读 28

移动

我在做移动端页面时发现，用 click 事件绑定按钮，点完要等一下才有反应，明显卡顿。查了下说是300ms延迟的问题，但我不太明白这延迟是哪来的？

试过直接用 touchstart 代替 click，虽然快了，但又触发了多次，而且和原生滚动冲突。有没有靠谱的解决办法？比如用 fastclick 这种库是不是还适用？现在主流方案是啥？

300ms延迟触摸事件

我来解答赞 3 收藏

反馈

1 条解答

红辰 Lv1

这300ms延迟是因为早期移动浏览器要判断是不是双击操作。现在确实有更好的写法来解决。

fastclick库虽然可以解决问题，但现在有点过时了。现代方案是用 touch-action CSS属性，配合 pointer-events 一起用更优雅。

简单来说，在需要优化的元素上加上

.button {

    touch-action: manipulation;

}

这样能消除点击延迟，还不影响原生滚动。如果需要兼容性更好的写法，可以用这个小函数：

function fastTap(el) {

    let startX, startY;

    el.addEventListener('touchstart', e => {

        startX = e.touches[0].clientX;

        startY = e.touches[0].clientY;

    });

    el.addEventListener('touchend', e => {

        const endX = e.changedTouches[0].clientX;

        const endY = e.changedTouches[0].clientY;

        if (Math.abs(endX - startX) < 10 && Math.abs(endY - startY) < 10) {

            el.click();

        }

    });

}

这个写法比直接用touchstart靠谱多了，也不会触发多次。记住加个小小的防抖就行，不然还是可能会有点问题。

2026-03-26 12:31