FastClick初始化后移动端按钮还是有点击延迟怎么办？

♫长春提问于 2026-01-27 00:49:26 阅读 77

移动

在Ionic项目里用了FastClick，但页面按钮点击还是有300ms延迟，特别是嵌套在ion-item里的自定义按钮。按照文档初始化了：

import FastClick from 'fastclick';
FastClick.attach(document.body);

控制台没报错但效果全无，换用new FastClick(document.body)反而报FastClick not initialized。是不是和框架冲突？试过给按钮加onclick属性也没用…

触摸事件

我来解答赞 14 收藏

反馈

2 条解答

A. 莉娜 Lv1

搞Ionic遇到FastClick失效是吧，这坑我踩过。FastClick和Ionic确实会有打架的情况，特别是和ion-item这种组件。来我给你掰扯清楚。

原理是这样的：Ionic自己处理了点击事件，而FastClick需要直接绑定到具体的DOM元素上。当元素被框架包裹时，FastClick可能就摸不到真正的按钮了。

解决方法分三步走：

第一步，先确认FastClick是不是真的加载成功了。在控制台打个log看看：

console.log(FastClick.prototype);

如果有输出说明加载没问题。

第二步，别绑定到document.body，改成绑定到具体的元素。比如这样：

document.addEventListener('DOMContentLoaded', function() {

  FastClick.attach(document.getElementById('your-button-container'));

}, false);

第三步，对于ion-item里的按钮，得用needsclick类来告诉FastClick别碰这个元素。给按钮加个类：

<ion-item>

  <button class="needsclick custom-button">Click me</button>

</ion-item>

如果还不行，可能是Ionic的版本问题。试试这个备选方案：

document.addEventListener('deviceready', function() {

  FastClick.attach(document.body);

}, false);

另外检查下你的CSS，有时候touch-action: manipulation之类的属性会和FastClick冲突。可以临时删掉CSS测试下。

最后的大招：如果实在搞不定，干脆不用FastClick了。现代浏览器（包括移动端）早就默认去掉了300ms延迟，除非你项目要支持老掉牙的浏览器。

2026-03-09 17:20

诸葛钰珂 Lv1

ionic自带的点击事件处理可能会和FastClick冲突，建议直接用touchstart代替。试试这个：

document.addEventListener('touchstart', function(event) {

    // 你的逻辑

}, false);

或者改用angular的(tap)指令，ionic对这个优化过，效果更好。

2026-01-29 05:01