前言
随着移动端设备的普及以及触控屏幕的普及，js 事件中 touch 类型的事件逐渐受到关注。而 touch 事件的开发相对麻烦，特别是 touchend 事件在手指离开屏幕时触发过程中，事件的判断系数相对麻烦。因此，本文将介绍 npm 包 touch-finger 这个库的使用教程。
touch-finger 简介
touch-finger 是一个轻量级的 JavaScript 库，它可以帮助我们优雅地管理 touch 类型的事件。通过 touch-finger，我们可以轻松地实现常常用到的手势操作（如长按、滑动等）。
touch-finger 的 API 简单易用，开箱即用，它对 touch 事件进行了封装，让我们能够更快更方便地响应 touch 类型的事件。
touch-finger 的安装
我们可以通过 npm 来安装 touch-finger。在命令行输入以下命令：
npm i touch-finger
touch-finger 的使用
touch-finger 是一个可直接在浏览器使用的 JavaScript 库，我们可以直接下载引入即可使用。在页面中引用 touch-finger.js，然后便可使用 touchfinger 对象，进行事件绑定。
touch-finger 提供了 6 个方法来绑定 touch 事件，分别是 onSwipeLeft、onSwipeRight、onSwipeUp、onSwipeDown、onPress 和 onTap。这些方法的语法相同，只是事件不同。下面是 touch-finger 的 working demo，包含了常用的操作。
-- -------------------- ---- -------
--- ----------- - --- --------------------------------------------
----------------------- - -----------------
------------------ -------
-
------------------------ - -----------------
------------------ --------
-
--------------------- - -----------------
------------------ -----
-
----------------------- - -----------------
------------------ -------
-
------------------- - -----------------
---------------------
-
----------------- - -----------------
-------------------
-touch-finger 的参数
touch-finger 还可以接收参数，以定制其行为。下面是参数列表：
- dragThreshold：定义了手指移动的最小距离（默认是 20）。
- longPressThreshold：定义了长按事件的最长时间（默认是 500ms）。
- doubleTapDelay：定义了两个 tap 事件之间的最长延迟（默认是 300ms）。
如果您要自定义这些参数，可以传递它们为 touch-finger 的参数：
let touchfinger = new TouchFinger(document.body, {
dragThreshold : 50,
longPressThreshold : 800
});
touchfinger.onSwipeLeft = function(sender){
console.log("swipe left");
}总结
本文介绍了 touch-finger 这个库的使用教程，通过 touchfinger 对象，我们可以轻松地实现长按、滑动等手势操作。它还提供了参数以定制其行为。如果你希望更优雅地管理 touch 类型的事件，那么这个库是一个值得尝试的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6251ab1864dac67385