移动端H5项目开发中必然会碰到点击事件响应延时的问题,因为移动端在手指触碰屏幕时,系统不知道你是想点击还是滑动,因此会存在一个大约300ms的延时判断(事实上这也只是样式上的延时比如高亮,如果存在事件的话比如点击是没会立即执行的,没有延时),以此为前置了解……
Fastclick库很好的解决了这个问题,我们只需要几行代码即可轻松搞定
import FastClick from 'fastclick'
FastClick.attach(document.body)
问题一
以上是Javascript的使用场景,然而,如果是TypeScript的话这样就不行了,引用会报错
Could not find a declaration file for module 'fastclick'.
因为这是一个纯JS库,Typescript支持需要添加@types/fastclick的支持
npm install @types/fastclick
!!!注意啦,不是用@types/fastclick来代替fastclick,而是要额外安装@types/click
问题二
FastClick.attach(document.body)这行代码中attach的调用会报错
Property 'attach' does not exist on type 'typeof fastclick'.
网上有一个解决方案就是修改@types/fastclick下的index.d.ts源码,将
declare module "fastclick" {
function fastclick(layer: any, options?: FastClickOptions): FastClickObject;
namespace fastclick {
var FastClick: FastClickStatic;
}
export = fastclick;
}
修改为:
declare module "fastclick" {
const fastclick: FastClickStatic;
export = fastclick;
}
问题得已解决,可毕竟是修改了node_modules中的源码,如果有更新或其他人拉取代码时,岂不是又会报出这个问题?!
一个比较好的解决方案是在项目根目录下新建一个fastClick.d.ts的文件,对其进行重新声明,文件内容为:
declare module 'fastclick' {
const fastclick: FastClickStatic
export = fastclick;
}
好了,一切都搞定了!